Question

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

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组件的方法是什么，以便可以在父页面组件中跟踪状态更改？是否存在符合此要求的现有组件，并且在反应生态系统中广泛使用而无需重新发明轮子？

Answer 1

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

这里的工作小提琴： https://jsbin.com/bitile/edit?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'))

reactjs checkboxlist组件 - 更新父

1 个答案: