如何將包含組件狀態的值傳遞迴父組件？

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: 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) }被取代？

1. allTags應該作爲屬性傳遞，而不是作爲外部作用域變量傳遞。

現在你的主要問題。

將狀態移至父組件（ReviewForm）。您可以將狀態設置爲{name: isChecked}結構的散列（name是標記名稱，isChecked是布爾值）。將其傳遞至ReviewTag，並將其降至Tag作爲財產。也可以將您的_onChange處理程序作爲屬性傳遞（它也應該移至父組件 - ReviewForm--也是）。

所以當標籤被選中時，它會調用ReviewForm的處理程序，並且ReviewForm的處理程序會相應地改變它自己的狀態。