我希望输入数据进入标题，文本区域数据进入内容

Question

import React  from 'react';
export default class CreateNote extend React.component {
constructor(props) {
super(props);
this.state = {note:{title:" ",content:" "}  };
console.log(this.state);
}
const inputEvent = (event) => {
const value = event.target.value;
const name = event.target.name;
this.setState({
note:{title:    ,content:    }
})
}
render(){ 
return(  
<input 
type="text" 
placeholder="Title"
name="title"
id=""
value={note.title}
onChange={inputEvent}
/> 
<textarea 
name="contant" 
id=""
value={note.contant}
cols="" 
rows=""
placeholder="Write a Notes"
onChange={inputEvent}
onClick={expanded}>
</textarea>
)
}

当我在输入字段和文本区域中写入文本时，不要将数据转到注释状态。我希望输入数据进入标题，文本区域数据进入内容。现在我将在setState上写什么？我想在控制台上看到结果。

Answer 1

提示：您的代码充满了错误和拼写错误(例如，CreateNote extend React.component而不是CreateNote extends React.Component，为类组件内的函数编写const，contant而不是content(。为了获得更好的帮助，请张贴你的工作代码，这样想帮助你的人就更容易复制问题了。

现在来看解决方案。如果你是一个初学者，获得你想要的东西的最好方法是制作单独的函数——一个在input内的文本更改时触发，另一个则在textarea内的文本改变时触发。

请注意，您已将title和content保留在状态对象note中。这意味着要更改title或content，必须更新整个note对象。如果只更新note的一个密钥而不保留另一个密钥，请小心(例如，如果仅更新title并希望使content不受影响(，则应使用有助于克隆对象值的排列运算符...，然后可以更新所需密钥的值。

titleChange = (e) => {
this.setState({
note: {
...this.state.note,
title: e.target.value
}
});
};
contentChange = (e) => {
this.setState({
note: {
...this.state.note,
content: e.target.value
}
});
};

更新，一种更清洁的方法：我们也可以使用"name"；输入和文本区域的属性，并将这两个函数组合为一个(我将其命名为inputChange(

inputChange = (e) => {
this.setState({
note: {
...this.state.note,
[e.target.name]: e.target.value
}
});
};

你可以在这里找到一个工作的CodeSandBox。请注意，如果从notes中移出所需字段title和content，并直接使它们成为状态变量，则不需要使用排列运算符。查看AppWithoutNote.js文件，了解如何实现它。