从 ReactJS 中的输入元素更新

Question

我正在尝试使用 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 时，我是在完整状态下完成的（也就是说，我知道整个新状态）。在这种情况下，我只想更改单个字段的内容：可以吗？

Answer 1

setState 只允许更改 top-level 状态下的键，如

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

从 ReactJS 中的输入元素更新

Updating from an input element in ReactJS

javascript

typescript

reactjs

react-tsx