【发布时间】：2016-05-15 18:45:39
【问题描述】：
总结：
我正在尝试使用 React 创建博客，但似乎在设置和更新文本字段时遇到了障碍。我有来自数据库的博客文本和用户名，并希望在给定用户的文本窗口中设置博客文本。然后，当用户键入时，我也想更新该文本。
尝试：
如果我设置我的 textarea 值={this.props.name}，它将正确设置值但不会更新。如果我将它设置为使用{this.state.value} 更新，那么它会从空白开始，但会正确更新。我可以找到有关如何设置默认值或更新值的示例。我无法弄清楚如何做到这两点。提前谢谢你。
应用内的 ClickScreen React 组件调用
<ClickScreen
setClicks={this.setClicks}
setUsername={this.setUsername}
setBlog={this.setBlog}
onLogout={this.onLogout}
counter={this.state.counter}
blogtext={this.state.blogtext}
username={this.state.username}
/>
ClickScreen 页面中的 BlogEntry React 组件调用：
<EditBlog name={this.props.blogtext} username={this.props.username} ></EditBlog>
EditBlog React 组件
// Allows a user to edit a blog entry.
var EditBlog = React.createClass({
displayName: 'Editor',
propTypes: {
name: React.PropTypes.string.isRequired
},
getInitialState: function() {
console.log("getInitialState value: " + this.props.name);
return {
value: this.props.name,
};
},
componentDidMount: function() {
this.setState({value: this.props.name});
},
handleChange: function(event) {
console.log("changing the text area to: " + event.target.value)
this.setState({value: event.target.value});
},
updateBlogText: function() {
ajax('update_blog.php', { blogtext: this.value, username: this.props.username }, function(response) {
console.log("Updating blog text to: " + this.state.value + " with user: " + this.props.username);
if (response.result === 'success') {
console.log("Success!");
//this.props.setClicks(response.counter, response.username, response.blogtext);
//this.props.setUsername(response.username);
//this.props.setBlog(response.blogtext);
}
else if (response.result === 'error') {
alert('Error: ' + response.msg);
console.log("Error!");
}
else {
alert('Response message has no result attribute.');
}
}.bind(this));
console.log("Click button clicked");
},
render: function() {
console.log("this.state.value: " + this.state.value)
console.log("this.state.value blogtext: " + this.props.name);
this.state.value = this.props.value;
return (
<div>
<h2>Blog Entry</h2>
<center>
<form id="noter-save-form" method="POST">
<textarea id="noter-text-area" name="textarea" onChange={this.handleChange} defaultValue={this.props.name}></textarea>
<input type="submit" value="Save" onClick={this.updateBlogText}/>
</form>
</center>
</div>
);
}
});
更新： 在我理解受控和不受控的 React 组件和 React 生命周期之间存在一些问题。现在该值在 getInitialState 中设置，然后在 componentWillReceiveProps 中适当更新。谢谢大家！
变化：
- componentDidMount -> componentWillReceiveProps。这与 React 组件生命周期有关。
- 文本区域
defaultValue={this.props.name}已更改以反映value={this.state.value}的更新状态值。 -
渲染函数中的
this.state.value=this.props.value已被移除。
// Allows a user to edit a blog entry.
var EditBlog = React.createClass({
displayName: 'Editor',
propTypes: {
name: React.PropTypes.string.isRequired
},
getInitialState: function() {
console.log("getInitialState value: " + this.props.name);
return {
value: this.props.name,
};
},
componentWillReceiveProps: function(nextProps) {
console.log("componentWillReceiveProps: " + nextProps.name);
this.setState({value: nextProps.name});
},
handleChange: function(event) {
console.log("changing the text area to: " + event.target.value);
this.setState({value: event.target.value});
},
updateBlogText: function() {
ajax('update_blog.php', { blogtext: this.value, username: this.props.username }, function(response) {
console.log("Updating blog text to: " + this.state.value + " with user: " + this.props.username);
if (response.result === 'success') {
console.log("Success!");
//this.props.setClicks(response.counter, response.username, response.blogtext);
//this.props.setUsername(response.username);
//this.props.setBlog(response.blogtext);
}
else if (response.result === 'error') {
alert('Error: ' + response.msg);
console.log("Error!");
}
else {
alert('Response message has no result attribute.');
}
}.bind(this));
console.log("Click button clicked");
},
render: function() {
return (
<div>
<h2>Blog Entry</h2>
<center>
<form id="noter-save-form" method="POST">
<textarea id="noter-text-area" name="textarea" onChange={this.handleChange} value={this.state.value}></textarea>
<input type="submit" value="Save" onClick={this.updateBlogText}/>
</form>
</center>
</div>
);
}
});
【问题讨论】：
标签： javascript reactjs