reactjs多个复选框

Question

我有以下代码在我的页面中添加复选框。问题是我怎样才能得到他们的价值观？我目前正在做的是使用 onChange 获取值并将其添加到我的状态，但不确定这是否是最好的方法？在输入中收集数据的最佳做法是什么，我应该使用 onChange 还是 ref，我对 ref 有点困惑（我是 ReactJS 的新手）

{Object.keys(this.state.IndustryChoice).map(key => (
                    <label className="custom-control fill-checkbox">
                      <input
                        name="Industry"
                        type="checkbox"
                        value={this.state.IndustryChoice[key]}
                        className="fill-control-input"
                        onChange={this.props.onMainToggle}
                      />
                      <span className="fill-control-indicator" />
                      <span className="fill-control-description">
                        {this.state.IndustryChoice[key]}
                      </span>
                    </label>
                  ))}

这是我的代码的其他部分

 handleMainObjectCheckBoxToggle = event => {
    let field = event.target.name;
    let value = event.target.value;
    let MainObject = this.state.MainObject;
    // console.log("Winning Ways", MainObject[field]);
    if (customIncludes(MainObject[field].results, value)) {
      MainObject[field].results = customRemoveStringArray(
        MainObject[field].results,
        value
      );
    } else {
      MainObject[field].results = appendObjTo(
        MainObject[field].results,
        value
      );
      // console.log(MainObject[field].results);
    }
    return this.setState({ MainObject });
  };

<FormTactics

              onMainToggle={this.handleMainObjectCheckBoxToggle}
            />

Answer 1

您必须将复选框值放入您的状态，因为它使您的组件更有能力控制复选框更新。只需在onChange 方法上使用setState，您就会看到更新的复选框

---

如果您需要更多帮助，请告诉我

Answer 2

我不太理解您的代码，但您似乎正试图在该州的某处推送或删除项目。我不知道它是否适合您，但我提供了一个简单的解决方案。与您的代码的主要区别：

• 硬编码Industry 密钥。
• 我没有直接改变状态，这是一种好的行为。
• 我正在为元素使用 checked 值。

我不太确定您如何在应用中实现此代码，以及您是否需要其他地方的 checked 值。在这里，我们将每个value 的checked 值保持在状态中，以备您将来使用它们。

class App extends React.Component {
  state = {
    IndustryChoice: {
      foo: "foo",
      bar: "bar",
      baz: "baz"
    },
    MainObject: {
      Industry: {
        results: []
      }
    },
    checkedValues: {}
  };

  handleMainObjectCheckBoxToggle = e => {
    const { value, checked } = e.target;
    const { results } = this.state.MainObject.Industry;

    if (checked) {
      const newResults = [...results, value];
      this.setState(prevState => ({
        MainObject: {
          ...prevState.MainObject,
          Industry: { ...prevState.MainObject.Industry, results: newResults }
        },
        checkedValues: { ...prevState.checkedValues, [value]: checked }
      }));
    } else {
      const newResults = results.filter(el => el !== value);
      this.setState(prevState => ({
        MainObject: {
          ...prevState.MainObject,
          Industry: { ...prevState.MainObject.Industry, results: newResults }
        },
        checkedValues: { ...prevState.checkedValues, [value]: checked }
      }));
    }
  };

  render() {
    return (
      <div>
        {Object.keys(this.state.IndustryChoice).map(key => (
          <label>
            <input
              name={key}
              type="checkbox"
              value={this.state.IndustryChoice[key]}
              className="fill-control-input"
              onChange={this.handleMainObjectCheckBoxToggle}
            />
            <span>{this.state.IndustryChoice[key]}</span>
          </label>
        ))}
        <p>results: {JSON.stringify(this.state.MainObject.Industry.results)}</p>
        <p>checked: {JSON.stringify(this.state.checkedValues)}</p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>