Question

我有一个DatePicker父组件，它有一个子SearchBar组件。 SearchBar是一个输入，它有一个onChange，它连接到DatePicker的handleSearchChange。由于DatePicker将currentDateObj的状态向下传递，SearchBar将使用当前插入的Date进行初始化。但是，SearchBar的输入应该从用户输入改变，因为它的onChange将改变DatePicker的状态，这反过来会改变SearchBar的输入，但即使使用我的console.logs我也不会＃39 ; t看到SearchBar正在重新渲染，输入会自动重置为初始日期（今天），而不是显示对用户输入的任何更改。

//DatePicker
    var DatePicker = React.createClass({
          getInitialState: function () {
            var today = new Date();
            return {currentDateObj: today, searchInput: undefined};
          },
          handleSearchChange: function (e) {
            var inputString = e.target.value.toString();
            var inputRegex = /^\d{2}[/]\d{2}[/]\d{4}$/;
            if (inputRegex.test(inputString)) {
              var year = e.target.value[6]+e.target.value[7]+e.target.value[8]+e.target.value[9];
              var month = e.target.value[0]+e.target.value[1];
              var day = e.target.value[3]+e.target.value[4];
              var currentDateObj = new Date(year, month, day);
              this.setState({currentDateObj:currentDateObj });
            } else {
              this.setState({searchInput: inputString});
            }
          },
          render: function () {
            var datePickerComponent = this;
            var dateNextYearObj = new Date();
            var searchDateObj = this.state.searchInput === undefined ? this.state.currentDateObj : this.state.searchInput;
            console.log('hit datepick render');
            console.log(this.state.searchInput);
            dateNextYearObj.setFullYear(this.state.currentDateObj.getFullYear() + 1);
            return(
              <div>
                <SearchBar currentDateObj={searchDateObj} handleSearchChange={this.handleSearchChange}/>
              </div>
            );
          }
        });

//搜索栏

var SearchBar = React.createClass({
  getInitialState: function () {
    console.log('hit searchbar render')
    var currentDateObj = this.props.currentDateObj;
    if(typeof (currentDateObj.getMonth) === "function"){

      var currentDate = currentDateObj.getDate().toString();
      if (currentDate.length === 1) {currentDate = "0" + currentDate;}

      var currentMonth = currentDateObj.getMonth().toString();
      if (currentMonth.length === 1) {currentMonth = "0" + currentMonth;}

      var currentYear = currentDateObj.getFullYear().toString();

      var formattedCurrentDate = currentMonth + "/" + currentDate + "/" + currentYear;
      return {currentDateObj: formattedCurrentDate};
    } else {

      return {currentDateObj: currentDateObj};
    }
  },
  render: function () {
    return (
      <div>
        <input type="text" onChange={this.props.handleSearchChange} value={this.state.currentDateObj}/>
      </div>
    );
  }
});

Answer 1

修订答案

getIntialState方法仅在首次创建组件时调用一次，因此在后续渲染时无效。

您可能希望将格式化逻辑粘贴到其他位置，例如渲染函数或更方便的生命周期方法，例如componentWillReceiveProps，这就是我这样做的方式。如果有帮助并且好运，请告诉我。

资源

旧答案：

由于Autobind by Default
，
不再相关

传递处理程序时，您可能会丢失this绑定。试试这个：

<SearchBar currentDateObj={searchDateObj} handleSearchChange={this.handleSearchChange.bind(this)}/>

通过this blog查看Igor Smirnov中管理绑定的所有酷炫方法。我使用Babel来转换我的代码并使用stage-0预设，我可以在我的类处理程序方法中使用胖箭头函数，所以我永远不必担心this。

Answer 2

尝试将关键字 this 绑定到handleSearchChange函数。

<SearchBar currentDateObj={searchDateObj} handleSearchChange={this.handleSearchChange.bind(this)}/>
<input type="text" onChange={this.props.handleSearchChange.bind(this)} value={this.state.currentDateObj}/>

如果您收到错误消息，请执行以下操作：<无法读取属性＆＃39; setState＆＃39; null，将 this 绑定到您的函数应修复错误。

尽管状态发生变化，父母不会重新渲染孩子

2 个答案:

修订答案

资源

旧答案：