如何将多个输入添加到对象以在ReactJS中呈现
如何将多个输入添加到对象以在ReactJS中呈现
提问于 2018-08-07 05:38:28
React是新手，可以管理呈现单个输入值，但我试图以列表形式呈现多个输入值，并且无法理解它。
我尝试将输入添加到对象中，并将对象推入数组(这是我遇到的主要问题)，然后呈现数组中的项。我以jobs为例，展示了到目前为止我所管理的内容……有人能给我指引正确的方向吗？
class App extends Component {
constructor(props){
super(props);
this.state = {
post: {
name: '',
description: ''
},
jobs: []
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
};
handleChange(e){
this.setState({
post.name: e.target.value,
post.name: e.target.value
})
}
handleSubmit(e){
e.preventDefault();
// This is where i've trying to push the inputs into an object...
this.setState({
post.name: '',
post.description: '',
jobs: this.state.items.concat(this.state.post)
})
}
render() {
const listItems = this.state.jobs.map((data, key) =>
<li key={key}>{data}</li>
)
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<form>
<input onChange={this.handleChange} type="text" value={this.state.post.name} placeholder="post name" />
<input onChange={this.handleChange} type="text" value={this.state.post.description} placeholder="post description" />
<button onClick={this.handleSubmit}>Submit</button>
</form>
<ul>
{listItems}
</ul>
</div>
);
}
}任何帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-07 05:47:56
您需要分别呈现jobs数组中元素的每个字段，因为React不能呈现对象。
{ post.name: '', post.description: ''}是无效的JavaScript语法。您必须将post设置为新对象。
您还可以使用输入的name来选择要更新的post对象中的哪个字段，以便可以为两个输入共享相同的onChange处理程序。
示例
class App extends React.Component {
state = {
post: {
name: "",
description: ""
},
jobs: []
};
handleChange = e => {
const { name, value } = e.target;
this.setState(prevState => ({
post: { ...prevState.post, [name]: value }
}));
};
handleSubmit = e => {
e.preventDefault();
this.setState(prevState => ({
jobs: [...prevState.jobs, prevState.post],
post: { name: "", description: "" }
}));
};
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<form>
<input
name="name"
onChange={this.handleChange}
type="text"
value={this.state.post.name}
placeholder="post name"
/>
<input
name="description"
onChange={this.handleChange}
type="text"
value={this.state.post.description}
placeholder="post description"
/>
<button onClick={this.handleSubmit}>Submit</button>
</form>
<ul>
{this.state.jobs.map((job, index) => (
<li key={index}>
{job.name}: {job.description}
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51715994
复制相关文章
相似问题
腾讯云开发者
