reactjs checkboxlist组件 - 更新父级中的状态更改

Posted 2023-03-05

【中文标题】reactjs checkboxlist组件 - 更新父级中的状态更改

【英文标题】：reactjs checkboxlist component - Updating state changes in parent

【发布时间】：2017-12-03 20:18:48

【问题描述】：

我有一堆复选框列表要求。我会详细解释。我有一堆语言说：

var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]

我有一个父组件，它有一个包含四个部分的表单，比如说：

class Page extends React.Component 
  render() 
    return (
      <form>
        <h1>CanSpeak</h1> <chkboxlist someProp="speak" />
        <h1>CanSpeak</h1> <chkboxlist someProp="read" />
        <h1>CanSpeak</h1> <chkboxlist someProp="write" />
        <h1>CanSpeak</h1> <chkboxlist someProp="understand" />
        <button
          onClick=e => 
            console.log("Need the various chkboxlist values here");
            e.preventDefault();
          
        >
          Save
        </button>
      </form>
    );
  

我希望 chkboxlist 组件跟踪每个部分中选定语言的列表，并使它们在“保存”按钮单击处理程序中可用。我希望跟踪“页面”组件中的状态变化（每个部分下的选定语言列表）。

我不想使用 redux 或一些这样的外部状态管理。

现在有什么方法可以创建这个 chkboxlist 组件，以便可以在父 Page 组件中跟踪状态更改？是否有任何现有组件可以满足此要求并在 React 生态系统中广泛使用，而无需重新发明***？

【参考方案1】：

我不知道引入一个单独的组件是否真的有用 - 因为它只是一个非常小的功能。

在这里工作的小提琴： https://jsbin.com/tusakexire/edit?html,js,output

你可以这样做：

class Chkboxlist extends React.Component 
  constructor(props) 
      super(props) 
      this.state = 
      props.values.map((v, i) => 
          this.state[v] = false
      )
  

  onChange(key, value) 
      this.setState( [key]: value , (state) => 
          this.props.onChange(this.state)
      )
  

  render() 
      return (
          <div className="list-group-item form-group">
                this.props.values.map((value, i) => (
                    <div className="checkbox" key=i>
                        <label>
                            <input 
                                onChange=(e) => this.onChange(value, e.target.checked) 
                                type='checkbox' 
                                value=this.state[value]
                            />
                            value
                        </label>
                    </div>
                ))
          </div>
      )
  


class Page extends React.Component 

  constructor(props) 
      super(props)
      this.state = 
  

  onChange(name, values) 
      this.setState( [name]: values )
  

  render() 
    const languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]


    return (
        <div className="container">
            <div className="row">
              <form className="form">

                <div className="list-group col-xs-6">
                    <h4>Can Speak</h4> 
                    <Chkboxlist 
                        onChange=(values) => this.onChange('speak', values)
                        values=languages
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Read</h4> 
                    <Chkboxlist 
                        onChange=(values) => this.onChange('read', values)
                        values=languages
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Write</h4> 
                    <Chkboxlist 
                        onChange=(values) => this.onChange('write', values)
                        values=languages
                    />
                </div>

                <div className="list-group col-xs-6">
                    <h4>Can Understand</h4> 
                    <Chkboxlist 
                        onChange=(values) => this.onChange('understand', values)
                        values=languages
                    />
                </div>

                <button
                  className="btn btn-primary"
                  onClick=(e) => 
                    console.log(this.state);
                    e.preventDefault();
                  
                >
                  Save
                </button>
              </form>
          </div>
      </div>
    );
  


ReactDOM.render(<Page />, document.getElementById('app'))

【讨论】：

你的 ChkboxList 构造函数给出了两个 eslint 警告（箭头函数没有返回值，setState 没有被调用，状态值直接发生了变化）。因此，我将构造函数替换为：constructor(props) super(props); var values = ; props.values.forEach(function(element) values[element] = false; , this); this.state = values; 我请求您尽可能更新源代码。谢谢。

@mathias.horn 更新了小提琴（看起来旧的已经改变了？）