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

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

本文关键字:组件 值传 状态 包含      更新时间:2023-09-26

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

如果标签被单击,我想在表单组件的列表状态中添加标签的值。有什么简单的方法吗?

我有一个这样的组件:

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>
  }
})

非常感谢您的帮助

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

  2. 真的,不能所有这些…

_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)。您可以将state作为具有{name: isChecked}结构的散列(name是Tag的名称,isChecked是布尔值)。将其传递给ReviewTag,并进一步传递给Tag作为属性。也传递你的_onChange处理程序作为属性(它应该被移动到父组件- ReviewForm -以及)。

    所以当标签被选中时,它调用ReviewForm的处理程序,ReviewForm的处理程序相应地改变自己的状态。