Question

我有一个问题，就是找到一种方法从其他组件中的组件轻松获取状态值。当我点击任何标签时。

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

我有这样的组件：

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的处理程序会相应地更改自己的状态。

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

1 个答案: