时间戳

首页 > 解决方案 > 反应输入值在子组件中不起作用

reactjs - 反应输入值在子组件中不起作用

问题描述

我有两个组件。子组件将在模态框中打开。模态框组件将包含添加和编辑用户。我已经为模式框输入传递了一些值，并在 getDerivedStateFormProps 生命周期挂钩中获取了该值。最初它将值填充到输入值。但在那之后，如果在文本框中输入任何内容，则状态不会更新。请参阅下面的详细信息

static getDerivedStateFromProps(props, state) {
    state.show = props.show;
    state.company = props.company;
    return state;
  }

onChange = async(e) => {
    this.setState({company: {...this.state.company, [e.target.name]: e.target.value}});
  }

但是状态没有更新。任何人都可以提供帮助来解决这个问题。提前致谢。

标签： reactjsreact-lifecycle-hooks

解决方案

不要改变state参数。

的正确用法getDerivedStateFromProps是返回一个浅合并到组件现有state.

static getDerivedStateFromProps(props) {
    const {show, company} = props;
    return {show, company};
}

此外，在getDerivedStateFromProps将您的调用中的状态应用于. 这意味着对in的任何更改都会破坏对in的更改。this.setStatecompanygetDerivedStateFromPropscompanythis.setState

推荐阅读