如何将值从包含组件的状态传回父组件？

Question

我无法找到一种方法来轻松地从其他组件中的组件获取状态值。当我点击任何标签时。

如果单击标签，我想将标签的值附加到表单组件中的列表状态。有什么简单的方法可以做到这一点吗？

我有这样的组件：

var Tag = React.createClass({
  getInitialState: function(){
    return {
      checked: false
    };
  },
  componentDidMount: function() {
    this.setState({
      checked: false
    });
  },
  _onChange: function(event) {
     if(this.state.checked == false){
       this.setState({
         checked: true
       });
     } else {
       this.setState({
         checked: false
       });
     }
  },
  render: function() {
    return (
      <div className="review-tag">
        <input
          type="checkbox"
          id={this.props.id}
          name={this.props.name}
          checked={this.state.checked}
          value={this.props.id}/>
        <label htmlFor={this.props.name} onClick={this._onChange}>{this.props.name}</label>
      </div>
    );
    return (
      <div>
        <span>{this.props.name}</span>
      </div>
    );
  }
});

var allTags = tags;

var ReviewTag = React.createClass({
  render: function() {
    const tagComps = allTags.map(function(tag){
      return <Tag {...tag}/>;
    });
    return (
      <div>
        {tagComps}
      </div>
    );
  }
});

标签组件在呈现时包含值，我必须在我的 ReviewForm 组件中获取每个标签的值，如下所示：

var fd = new FormData();
var ReviewForm = React.createClass({
  getInitialState: function(){
    return {
      Author: '',
      Tags: ''
    };
  },

  componentDidMount: function() {
    this.setState({
      Author: author,
      Tags: tags
    });
  },

  submit: function (e){
    var self;

    e.preventDefault();
    self = this;

    var data = {
      tags: this.state.Tags,
      author: this.state.Author
    };

    for (var key in data) {
      fd.append(key, data[key]);
    }
    $.ajax({
      type: 'POST',
      url: '/reviews/submit/',
      data: fd,
      processData: false,
      contentType: false
    })
    .done(function(data) {
      console.log('Review added successfully.');
    })
    .error(function(msg) {
      var errors = msg.responseJSON;
      console.log(errors);
    });
  },
  render: function() {
    <div className="scolumn">
       <ReviewTag/>
    </div>
  }
})

非常感谢您的帮助。

Answer 1

您不需要在 componentDidMount 中设置状态 — 删除那段代码。
真的，难道这一切都...

_onChange: function(event) { if(this.state.checked == false){ this.setState({ checked: true }); } else { this.setState({ checked: false }); } },

被替换为_onChange: function(event) { this.setState(checked: !this.state.cheked) }?

allTags 应作为属性传递，而不是外部范围变量。

现在回答你的主要问题。

将状态移至父组件 (ReviewForm)。您可以将状态作为具有 {name: isChecked} 结构的散列（name 是标签的名称，而 isChecked 是布尔值）。将其传递给 ReviewTag，然后进一步传递给 Tag 作为属性。同时将您的 _onChange 处理程序作为属性传递（它也应该移至父组件 — ReviewForm —）。

所以当 Tag 被选中时，它会调用 ReviewForm 的处理程序，而 ReviewForm 的处理程序会相应地更改自己的状态。

如何将值从包含组件的状态传回父组件？

How to pass value from included component's state back to parent component?

javascript

jquery

reactjs

react-jsx