如何使用react进行双向数据绑定，使输入值A在B更新时更新，反之亦然

How would one do two way data binding with react, having an input value A update when B is, and vice versa?

本文关键字：更新 何使用 反之亦然 输入 数据绑定 react      更新时间：2023-09-26

目前我有以下代码:

var Text = React.createClass({
  getInitialState: function(){
      return {
          pageName: this.props.pageName,
          url:  this.props.pageName,
      }
  },
  handleChange: function(){
      var pageName = this.refs.pageName.getDOMNode().value;
      var url      = this.refs.url.getDOMNode().value;
      this.setState({
          pageName: pageName,
          url: url,
              });
  },
  render: function() {
    return (
        <div>
        pageName: <input ref="pageName" onChange={this.handleChange} value={this.state.url}/><br/>
        url: <input ref="url" onChange={this.handleChange} value={this.state.pageName.toLowerCase()}/><br/>
        </div>);
  }
});
React.render(<Text pageName="name" url="url" />, document.body);

从这里的示例中可以看到，它没有像预期的那样工作。我想知道是否有人能就这个话题给我指点一下。谢谢:)

如果您希望通过更改pageName来更新url，反之亦然，那么您可能需要这样做:

var Text = React.createClass({
  getInitialState: function(){
      return {
          pageName: this.props.pageName,
          url:  this.props.pageName,
      }
  },
  handleChange: function(event){
      var pageName = event.target.value;
      var url      = event.target.value.toLowerCase();
      this.setState({
          pageName: pageName,
          url: url,
              });
  },
  render: function() {
    return (
        <div>
        pageName: <input ref="pageName" onChange={this.handleChange} value={this.state.pageName}/><br/>
        url: <input ref="url" onChange={this.handleChange} value={this.state.url}/><br/>
        </div>);
  }
});
React.render(<Text pageName="name" />, document.body);

您有几个错误。

    var Text = React.createClass({
      getInitialState: function(){
          return {
              pageName: this.props.pageName,
              url:  this.props.url,
          }
      },
      handlePageChange: function(event){
          this.setState({pageName: event.target.value});
      },
        handleUrlChange: function(event){
          this.setState({url: event.target.value});
      },
      render: function() {
        return (
            <div>
            pageName: <input ref="pageName" onChange={this.handlePageChange} value={this.state.pageName.toLowerCase()}/><br/>
            url: <input ref="url" onChange={this.handleUrlChange} value={this.state.url}/><br/>
            </div>);
      }
    });
    React.render(<Text pageName="name" url="url" />, document.body);
相关文章：