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

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

1. 您不需要在 componentDidMount 中设置状态 - 删除该代码段。

2. 真的，这一切都不能...

_onChange:函数(事件){ if(this.state.checked == false){ this.setState({ 检查:正确 }); } 别的 { this.setState({ 检查:假 }); } },

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

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

现在回答你的主要问题。

将状态移至父组件 (ReviewForm)。您可以将状态作为具有 {name: isChecked} 结构的哈希值(name 是标签的名称，isChecked 是 bool 值)。将其作为属性传递给 ReviewTag 并进一步传递给 Tag。同时将您的 _onChange 处理程序作为属性传递(它也应该移至父组件 - ReviewForm)。

因此，当标记被选中时，它会调用 ReviewForm 的处理程序，而 ReviewForm 的处理程序会相应地更改其自身的状态。