Question

要点：

我试图用React创建一个博客，似乎在设置和更新文本字段方面遇到了麻烦。我有来自数据库的博客文本和用户名，并希望在给定用户的文本窗口中设置博客文本。然后当用户输入时我也想更新那个文本。

尝试：

如果我设置我的textarea值= {this.props.name}，它将正确设置值但不会更新。如果我将其设置为使用{this.state.value}进行更新，则它会从空白处开始，但会正确更新。我可以找到如何设置默认值或更新值的示例。我无法弄清楚如何做到这两点。提前谢谢。

ClickScreen在App中反应组件调用

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

BlogEntry在ClickScreen页面内反应组件调用：

<EditBlog name={this.props.blogtext} username={this.props.username} ></EditBlog>

EditBlog React Component

// 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 - ＆gt; componentWillReceiveProps。这与React组件生命周期有关。
文本区域defaultValue={this.props.name}已更改，以反映value={this.state.value}的更新状态值。
已删除渲染功能中的this.state.value=this.props.value。

//允许用户编辑博客条目。 var EditBlog = React.createClass（{ displayName：＆＃39;编辑＆＃39;， propTypes：{ name：React.PropTypes.string.isRequired }， getInitialState：function（）{ console.log（＆＃34; getInitialState值：＆＃34; + this.props.name）; 返回{ value：this.props.name， }; }， componentWillReceiveProps：function（nextProps）{ console.log（＆＃34; componentWillReceiveProps：＆＃34; + nextProps.name）; this.setState（{value：nextProps.name}）; }， handleChange：function（event）{ console.log（＆＃34;将文本区域更改为：＆＃34; + event.target.value）; this.setState（{value：event.target.value}）; }， updateBlogText：function（）{ ajax（＆＃39; update_blog.php＆＃39;，{blogtext：this.value，username：this.props.username}，function（response）{ console.log（＆＃34;将博客文本更新为：＆＃34; + this.state.value +＆＃34; with user：＆＃34; + 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>
    );
  }
});
```

Answer 1

对于React中的表单：

defaultValue和defaultChecked道具仅在初始渲染期间使用。如果需要更新后续渲染中的值，则需要使用受控组件。

Docs on controlled components

Answer 2

阅读您的代码，无需：

componentDidMount: function() {
    this.setState({value: this.props.name});
},

这项工作已由getInitialState完成。如果您打算在组件接收新道具时更新状态，则应写入：

componentWillReceiveProps: function(nextProps) {
    this.setState({value: nextProps.name});
},

我认为，在您的情况下，您应该使用this.state.value并且它没有很好地初始化，因为在收到componentWillReceiveProps值时，props.name未实现更新组件状态来自undefined。

Answer 3

因此，每当你想编辑道具时，你必须将它们设置为本地组件状态（就像你在getInitialState中通过设置值到道具那样）。道具是不可变的，因此设置输入到道具的值或defaultValue将/不应该允许您更改道具。

下面，我所做的是设置this.state.name的输入值，并且this.state.name在初始状态下设置为this.props.name，每当你调用update时，它都会更新组件状态与输入中输入的内容一致。

如果您需要将名称传递回父组件，那么您需要从父项传入一个函数，然后您可以从子项调用该函数以通知父项名称值已更改，父项将需要更新名称，然后将其传递回子...这将创建一个双向数据绑定..

/index.php/content/search

如何设置defaultValue，value = {this.props.value}，并使用React更新文本输入的值？

3 个答案: