React 组件的状态/值如何根据外部交互而改变？例如，如果我有一个日期范围组件（下面的屏幕截图），并且我已经设置了日期，但现在我想单击重置链接来清除它，可以吗？
我可以单击组件上的“X”来清除日期，但这都是内部组件的内容。我需要在点击重置链接时清除日期。我不知道如何从外部告诉组件它的日期应该被重置。我怎样才能做到这一点？在最初设置组件时，我尝试将变量传递给开始日期属性，但该变量不会根据组件内完成的任何操作进行更新。
通过外部交互更新 React 组件状态
IT技术
javascript
reactjs
2021-05-07 12:39:43
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} />;
}
}