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

您必须将复选框值置于您的状态，因为它为您的组件提供了更多权力来控制复选框更新。只需在setState方法上使用onChange，您就会看到更新的复选框

---

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

Answer 2

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

• 硬编码的Industry键。
• 我不是直接改变状态，这是一种很好的行为。
• 我正在使用checked值作为元素。

我不太确定你如何在你的应用程序中实现此代码，如果你需要其他地方的checked值。在这里，我们将保持每个checked的value值，以防您将来使用它们。

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>