我偶尔会对概念上有状态的组件做出反应,我想重置它们.理想的行为相当于删除旧组件并读取新的原始组件.
React提供了一种方法setState,允许设置组件自己的显式状态,但不包括隐式状态,如浏览器焦点和表单状态,并且它还排除其子级的状态.抓住所有间接状态可能是一个棘手的任务,我宁愿严格而完全地解决它,而不是每一个令人惊讶的新状态都在玩捣蛋.
是否有API或模式来执行此操作？
编辑: 我做了一个简单的例子来演示这种this.replaceState(this.getInitialState())方法并将其与方法进行对比this.setState(this.getInitialState()):https://jsfiddle.net/emn13/kdrzk6gh/ - replaceState更强大.
TLDR:在不违反React原则或忽略标准封装机会的情况下,React中的通用设计要求似乎是不可能的.
我有一个表单,显示来自服务器API的现有数据,并允许用户编辑字段并更新服务器上的数据.当用户更改输入值时,这会动态发生,而不是要求他们在每次编辑后"提交"表单.
对于某些表单输入,立即进行值更改(例如复选框,单选按钮,选择).对于其他人来说,价值变化是逐步增加的 - 最明显的是文本输入.我不希望每次击键都有服务器请求,因为这会导致为不完整的值生成服务器端验证错误.相反,一旦用户离开文本输入字段,服务器就会更新.如果值不变,发送服务器请求也是浪费.
在React中,关键的设计原则似乎是你保持一个真实/状态的单一来源,并通过使用道具的组件渗透.组件不应该保持自己的状态作为道具的副本,而是应该直接渲染道具[1]."单一来源"将是从服务器提取数据和向服务器提取数据的父组件.
对于渲染<input>元素,使其值与服务器更改保持同步,它应该使用value属性,因为defaultValue只在第一次渲染[2]上计算.React的设计原则意味着我应该设定<input value={this.props.value} />.为了响应用户输入,onChange还必须提供一个处理程序,将更改冒泡到父组件,这将更新状态并使<input>更新呈现props.
但是,我不想在onChange处理程序中触发服务器请求,因为这将在每次击键时触发.我需要在一个onBlur事件上触发服务器请求,假设该值已经改变了onFocus.对于某些元素而不是其他元素需要这个元素意味着父组件需要两个处理程序:一个onChange处理程序来更新所有子组件的状态并触发服务器对某些字段的请求,以及一个onBlur触发服务器请求其他字段.要求父组件知道哪些子表单组件应该表现出哪种行为似乎无法正确封装.子组件应该能够监视自己的值并决定何时发出"做某事"事件.
在没有违反React原则之一的情况下,我无法看到实现这一目标的方法,最有可能的方法是在每个表单组件中维护一个状态.像这样的东西:
class TextInput extends React.Component {
constructor(props) {
super(props);
this.initialValue = this.props.value;
this.setState({value: this.props.value});
}
componentWillReceiveProps = (nextProps) => {
this.initialValue = nextProps.value;
this.setState({value: nextProps.value});
};
handleFocus = (e) => {
this.initialValue = e.target.value;
};
handleChange = (e) => {
this.setState({value: e.target.value});
};
handleBlur = …