Я использую responsejs с родительским и дочерним компонентами. В дочернем я привязываю значение textarea к свойству, отправленному родителем. Когда я удаляю дочерний компонент, нажав кнопку «удалить», значение textarea соответствует внутреннему HTML-тексту на div дочернего компонента, как и ожидалось. Однако, поскольку значение textarea связано с свойством reactjs, я не могу изменить содержимое текстовой области.responsejs can not изменить значение
Я хочу, чтобы иметь возможность изменять значение текстовой области, сохранять и по-прежнему иметь дочерние компоненты правильно удалить. Я уверен, что это что-то простое, но я не могу понять это ...
//Child
var Comment = React.createClass({
remove: function() {
this.props.deleteFromBoard(this.props.index)
},
save: function() {
var val = this.refs.newText.value;
console.log('New Comment: ' + val);
this.props.updateCommentText(val, this.props.index);
this.setState({editing:false})
},
render: function() {
return (
<div className="commentContainer">
<div className="commentText">{this.props.myVal}</div>
<textarea ref="newText"
value={this.props.myVal}
onChange={this.handleChange}></textarea>
<button onClick={this.save} className="button-success">save</button>
<button onClick={this.remove} className="button-danger">Remove Question</button>
</div>
);
}
});
//Parent
var Board = React.createClass({
//Initial state is an array with three different strings of text 'comments'
getInitialState: function(){
return {
comments: [
'One',
'Two',
'Three',
'Four'
]
}
},
removeComment: function(i){
console.log('Removing comment: ' + i + ' bkbk');
var arr = this.state.comments;
//Spicing the array (where do you want to start? 'i', how many do you want to remove? '1'
arr.splice(i,1);
this.setState({comments:arr})
},
reportMe: function(){
var arr = this.state.comments;
var arrayLength = arr.length;
for (var i = 0; i < arrayLength; i++) {
alert(arr[i]);
}
},
updateComment: function(newText, i){
var arr = this.state.comments;
arr[i] = newText
this.setState({comments:arr})
},
//Properties of each comment
eachComment: function(text, i) {
return (
<Comment
key={i} index={i} myVal={text} updateCommentText={this.updateComment} deleteFromBoard={this.removeComment}></Comment>
);
},
render: function(){
return (
<div>
<button onClick={this.reportMe.bind(null)} className="button-success">Report Contents Of Array</button>
<div className="board">
{
this.state.comments.map(this.eachComment)
}
</div>
</div>
)
}
})
ReactDOM.render(<Board/>, document.getElementById('container'));
Попробуйте использовать 'defaultValue' вместо' value' с текстовым полем - [контролируемые компоненты] (https://facebook.github.io/react/docs/forms.html#controlled-components) –
Пробовал defaultValue. Он не сохраняет значение текстового поля при синхронизации дочернего компонента. – nikotromus