尽管状态发生变化，但反应 parent 而不是 re-rendering child

Question

我有一个 DatePicker parent 组件，它有一个 child SearchBar 组件。 SearchBar 是一个具有 onChange 的输入，它连接到 DatePicker 的 handleSearchChange。由于 DatePicker 向下传递其 currentDateObj 状态，SearchBar 将使用插入的当前日期进行初始化。但是，SearchBar 的输入应该从用户输入改变，因为它的 onChange 会改变 DatePicker 的状态，DatePicker 应该反过来改变 SearchBar 的输入，但即使使用我的 console.logs 我也没有看到 SearchBar 是 re-rendered 和输入不断将自身重置为初始日期（今天），而不是显示对用户输入的任何更改。

//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，这就是我的做法。让我知道是否有帮助，祝你好运。

资源

旧答案：

No longer relevant due to Autobind by Default

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

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

查看 this blog by Igor Smirnov 中管理绑定的所有酷炫方法。我使用 Babel 来转换我的代码，并使用 stage-0 预设，我可以简单地在我的 class 处理程序方法中使用粗箭头函数，所以我永远不必担心 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}/>

如果您收到类似“无法读取属性 'setState' of null 的错误，将 this 绑定到您的函数应该可以修复该错误。

尽管状态发生变化，但反应 parent 而不是 re-rendering child

react parent not re-rendering child despite state change

components

state

render

parent-child

reactjs

修改后的答案

资源

旧答案：