Как я могу управлять несколькими вызовами setState в одном компоненте React? - PullRequest
Новая
       83

Как я могу управлять несколькими вызовами setState в одном компоненте React?

1 голос
/ 13 апреля 2020

Я использую пакет npm для создания сетки данных. Эта сетка данных является компонентом класса и поставляется со строками в качестве состояния. Я также пытаюсь добавить входные данные над сеткой данных, которые позволяют пользователям изменять значения этих входных данных при одновременном изменении значений в сетке данных. Однако меняются только значения сетки данных. Входы НЕ меняются, поэтому функция updateFormData не работает

Вот код 

import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./SellPressure.css";

const columns = [
  { key: "layer", name: "Layer", editable: false },
  { key: "electric", name: "Elec. Rate", editable: true, resizable: true },
  { key: "percentHash", name: "% Hash", editable: true },
  { key: "percentHashAfterBlowout", name: "Adj. % Hash", editable: false },
  { key: "oldGen", name: "S9 Cost", editable: false },
  { key: "newGen", name: "S17 Cost", editable: false },
  { key: "OldGenTier", name: "S9 %", editable: false },
  { key: "NewGenTier", name: "S17 %", editable: false },
  { key: "OldGenTierBlowout", name: "Adj. S9%", editable: false },
  { key: "NewGenTierBlowout", name: "Adj. S17%", editable: false },
  { key: "percentSold", name: "% Sold", editable: false },
  { key: "BTCSold", name: "BTC Sold", editable: false },
];


const rows = [
  { layer: 1, electric: .020, percentHash: 5, percentHashAfterBlowout: 0, oldGen: 0, newGen: 0,
  OldGenTier: 0, NewGenTier: 0, OldGenTierBlowout: 0, NewGenTierBlowout: 0, percentSold: 0, BTCSold: 0
}
];

// require complex functions to determine their value
// percentHashAfterBlowout,
// OldGenTierBlowout,
// percentSold




class Example extends React.Component {
  // state = { rows };

  state = {
      rows: [...rows],
      rewardYo: "",
      btcPriceYo: this.props.btcPrice,
      difficultyYo: this.props.difficulty,
      s9Hash: 13.5,
      s17Hash: 50,
      s9Power: 1400,
      s17Power: 2100 
  }



  updateFormData = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };


  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };




  render() {
    return (

<div>

        <input
        value={this.state.rewardYo}
        onChange={this.updateFormData}
        type="number"
        name="rewardYo"
        required
        />

<input
        value={this.state.btcPriceYo}
        onChange={this.updateFormData}
        type="btcPriceYo"
        name="btcPriceYo"
        required 
        />

  <div>
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={1}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
        cellRangeSelection={{
          onStart: args => console.log(rows),
          onUpdate: args => console.log(rows),
          onComplete: args => console.log(rows)
        }}
      />
  </div>
</div>
    );
  }
}

export default Example;```

1 Ответ

0 голосов
/ 13 апреля 2020

Входные данные не меняются, потому что updateDataForm требует некоторых изменений: 

updateFormData = (event, stateName) => {
    this.setState({
      [stateName]: event.target.value
    });
  };

Затем вы называете это так: 

onChange={(e) => this.updateFormData(e, 'theStateYouWantToChange')}
...