gpt4 book ai didi

javascript - 如何设置defaultValue,value={this.props.value},并用React更新文本输入的值?

转载 作者:搜寻专家 更新时间:2023-11-01 05:10:07 25 4
gpt4 key购买 nike

总结:

我正在尝试使用 React 创建博客,但似乎在设置和更新文本字段时遇到了障碍。我有来自数据库的博客文本和用户名,并且想在给定用户的文本窗口中设置博客文本。然后,当用户键入时,我也想更新该文本。

尝试:

如果我设置我的 textarea value={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} 已更改以反射(reflect) 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>
);
}
});

最佳答案

因此,无论何时你想编辑 Prop ,你都必须在本地组件状态中设置它们(就像你在 getInitialState 中通过设置 Prop 的值所做的那样)。 Prop 是不可变的,因此将输入的值或默认值设置为 Prop 将/不应该允许您更改 Prop 。

所以下面,我所做的是将输入值设置为 this.state.name,并且 this.state.name 在初始状态下设置为 this.props.name,每当您调用更新时,它都会更新组件状态与输入中键入的任何内容。

如果你需要将名称传回给父组件,那么你需要从父组件中传入一个函数,然后你可以从子组件中调用该函数来通知父组件名称值已更改,父组件将需要更新名称然后传回给 child ...这创建了一个 2 路数据绑定(bind)..

// 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 ( newProps ) {
this.setState( { value:newProps.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} value={value}></textarea>
<input type="submit" value="Save" onClick={this.updateBlogText}/>
</form>
</center>
</div>
);
}
});

关于javascript - 如何设置defaultValue,value={this.props.value},并用React更新文本输入的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37242289/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com