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

Question

React 组件的状态/值如何根据外部交互发生变化？例如，如果我有一个日期范围组件(下面的屏幕截图)，并且我已经设置了日期，但现在我想单击一个重置链接来清除它，我可以吗？

我可以单击组件上的“X”来清除日期，但那是所有内部组件的东西。我需要在点击重置 链接时清除日期。我不确定如何从外部告诉组件它的日期应该被重置。我怎样才能做到这一点？最初设置组件时，我尝试将一个变量传递给开始日期属性，但该变量不会根据组件中完成的任何操作进行更新。

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