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

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

我可以点击组件上的“X”来清除日期，但这都是组件内部的东西。我需要在点击重置链接时清除日期。我不知道如何从外部告诉组件应该重置日期。我该怎么做？在最初设置组件时，我尝试将一个变量传递给start date属性，但该变量不会根据组件内所做的任何操作进行更新

---

典型的答案是提升状态上升。你最终会得到这样的结果：

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

类父级扩展组件{
//如果你愿意，可以从Redux那里得到这个
state={dateRange:null}；
//如果你愿意的话，可能是一次重做
OnDataRangeChange=dateRange=>this.setState（{dateRange}）；
//如果你愿意的话，可能是一次重做
resetDateRange=（）=>this.OnDaterRange（null）；
render（）{
const{dateRange}=this.state；
返回(
);
}
}

重置控件可能类似于：

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

const ResetControl=（{onClick}）=>（重置this.props.onDateRangeChange（值）；
render（）{
返回；
}
}

这正是我们使用自己的组件扩展React.Component的原因。您可以在子级中设置一个clear方法，然后使用refs调用父级中的child clear方法，这是两个“兄弟”的常见技术组件需要交互的是。这不是一个选项，可能值得研究像或这样的状态管理解决方案。一般来说，如果两个组件需要访问相同的位信息，则该信息应该是状态，并且需要位于两个组件最接近的公共父级中。@Thole的注释可能就是您所看到的好的，基本上是将函数传递给组件，以便组件可以在日期更改时调用它。谢谢。

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