通过外部交互更新React组件状态

Question

如何基于外部交互来改变React组件的状态/值？例如，如果我有一个日期范围组件（如下图所示），并且已经设置了日期，但是现在我想单击一个 Reset 链接将其清除，可以吗？

我可以单击组件上的“ X”以清除日期，但这就是所有内部组件的内容。按下重置链接时，我需要清除日期。我不确定如何从外部告诉组件应该重新设置其日期。我怎样才能做到这一点？最初设置组件时，我尝试将变量传递给start date属性，但是该变量不会根据组件内 所做的任何事情进行更新。

Answer 1

提升状态是典型的答案。您最终会遇到这样的事情：

class Parent extends Component {

  // could get this from Redux if you wanted
  state = { dateRange: null };
  // could be a redux action if you wanted
  onDateRangeChange = dateRange => this.setState({ dateRange });
  // could be a redux action if you wanted
  resetDateRange = () => this.onDateRange(null);

  render() {
     const {dateRange} = this.state;

     return (
       <div>
         <SomeComponentThatEventuallyRendersReset onReset={this.resetDateRange} />
         <SomeComponentThatEventuallyRendersDateControl
            onDateRangeChange={this.onDateRangeChange}
            dateRange={dateRange}
         />
       </div>
     );
  }
}

您的重置控件可能类似于：

const ResetControl = ({onClick}) => (<button type="button" onClick={onClick}>Reset</button);

您的日期选择器可能类似于：

class DatePicker extends Component {

   state = { any transient state you need before "submitting" changes to your parent };

   onSelection = (value) => this.props.onDateRangeChange(value);

   render() {
      return <Whatever onChange={this.onSelection} onValue={this.props.dateRange} />;
   }
}