reactjs多个复选框

Posted 2023-02-23

【中文标题】reactjs多个复选框

【英文标题】：reactjs multiple checkbox

【发布时间】：2019-02-13 05:27:39

【问题描述】：

我有以下代码在我的页面中添加复选框。问题是我怎样才能得到他们的价值观？我目前正在做的是使用 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
            />

【问题讨论】：

您看过reactjs.org/docs/forms.html 上的“处理多个输入”吗？这听起来大概是您的提议。

你想知道关于表单的最佳实践是什么，你应该检查goshakkk.name/controlled-vs-uncontrolled-inputs-react

How do I edit multiple input controlled components in React?的可能重复

我们可以查看您代码的其他部分吗？您如何处理更改，如何设置状态等？

“handleMainObjectCheckBoxToggle”处理我的状态变化，但问题是每次他们检查一个选项时它只会得到 1 个值，这就是为什么我需要迭代到我的 MainObject[field].results 如果它已经如果它不存在，则添加它。有没有更简单的方法？

【参考方案1】：

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

---

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

【讨论】：

是的，我已经获得了单个复选框的值，有没有办法获得在复选框更改时已经检查的所有值？

是的。这就是你如何维护你的状态，你只需要阅读onChange上的状态它应该有所有复选框的值

【参考方案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>

【讨论】：

这是我当前的架构 如您所见，我的表单由多个表单部分组件组成。我在每次更改时更新 App 状态的原因是，一旦用户单击 SubmitButton，我只会在我的 api 中发送整个 App 状态。但不确定这是否是最佳做法