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只允许更改状态中的顶级键，如

不要忘记将你的功能绑定到适当的环境。

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

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

从ReactJS中的输入元素更新

1 个答案: