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的{{1}}值保持在状态，以防将来使用。

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"));

reactjs多个复选框

2 个答案: