0

我正在尝试使用 React 创建一个页面，从而可以更新状态的单个元素；这是状态的定义方式：

interface MyState {
    data?: MyData;
    loading: boolean;
}

interface MyData {
    id: number;
    description: string;
    test: string;    
}

我的渲染函数中有以下内容：

return <div>
    <h1>Description: {myData.description}</h1>
    <br/><br/>
    <input type="text" value={emailType!.test} onChange={this.handleChange} />

</div>;

还有handleChange（这是我的问题的核心）：

handleChange(event: React.FormEvent<HTMLInputElement>) {        
    this.setState({ emailType!.test: event.currentTarget.value });
}

由于我使用的是 tsx，所以上面的函数甚至无法编译。但是，它确实说明了我正在尝试做的事情。通常，当我调用 时this.setState，我已经完成了一个完整的状态（也就是说，我知道整个新状态）。在这种情况下，我只想更改单个字段的内容：这可能吗？

4

1 回答 1

0

setState 只允许更改状态中的顶级键，例如

handleChange = (event: React.FormEvent<HTMLInputElement>) => {
    const emailType = { ...emailType, test: event.currentTarget.value }
    this.setState({ emailType })
}

不要忘记将您的函数绑定到适当的上下文。

另一种选择是使用函数作为 setState 中的参数：

this.setState((oldState) => {
  return {
    ...oldState,
    emailType: {
      ...oldState.emailType,
      test: event.currentTarget.value
    }
  }
})
于 2018-03-29T08:41:06.840 回答