据我了解,你想把新人推向现有的人contactArray
?我将分享我的做法。看一看:
const contactArray = [
{
name: 'John',
email: '[email protected] /cdn-cgi/l/email-protection',
phone: '111-111-111'
},
{
name: 'Dave',
email: '[email protected] /cdn-cgi/l/email-protection',
phone: '222-222-222'
}
];
class Form extends React.Component {
constructor() {
super();
this.state = {
contacts: contactArray
};
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const
{ contacts } = this.state,
name = this.refs.name.value,
email = this.refs.email.value,
phone = this.refs.phone.value;
this.setState({
contacts: [...contacts, {
name,
email,
phone
}]
}, () => {
this.refs.name.value = '';
this.refs.email.value = '';
this.refs.phone.value = '';
});
}
render() {
const { contacts } = this.state;
console.log('message',this.state.contacts);
return (
<div>
<h2>Add Someone</h2>
<form onSubmit={this.handleSubmit}>
<input type="text" ref="name" placeholder="name" />
<input type="text" ref="email" placeholder="email" />
<input type="text" ref="phone" placeholder="phone" />
<button type="submit">Submit</button>
</form>
<h2>Exsiting contacts:</h2>
<ul>
{contacts.map((contact) =>
<li>{`Name: ${contact.name} Email: ${contact.email} Phone: ${contact.phone}`}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
所以我们要做的第一件事就是保存contactArray
在我们要使用它的实际组件中,接下来我们声明并绑定我们的handleSubmit
我在用refs
以获得输入的值。this.setState ({ contacts: [...contacts] , { Object });
这里我们使用 ES6 spread 运算符将所有现有联系人传递到新状态并添加新联系人。{ name, email, phone }
完全就像做{ name:name, email:email ...}
这只是一个简写this.setState({}, () => { Callback! });
在回调函数中this.setState({});
我要清除输入值。现场演示:http://codepen.io/ilanus/pen/qaXNmb http://codepen.io/ilanus/pen/qaXNmb
这是另一种方法,不同的方法会产生相同的结果。
const contactArray = [
{
name: 'John',
email: '[email protected] /cdn-cgi/l/email-protection',
phone: '111-111-111'
},
{
name: 'Dave',
email: '[email protected] /cdn-cgi/l/email-protection',
phone: '222-222-222'
}
];
class Form extends React.Component {
constructor() {
super();
this.state = {
contacts: contactArray,
newContact: {
name: '',
email: '',
phone: ''
}
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInput = this.handleInput.bind(this);
}
handleSubmit(e) {
e.preventDefault();
const { contacts, newContact } = this.state;
this.setState({
contacts: [...contacts, newContact],
}, () => {
for (let val in newContact) {
newContact[val] = ''; // Clear the values...
}
this.setState({ newContact });
});
}
handleInput(e, element) {
const { newContact } = this.state;
newContact[element] = e.target.value;
this.setState({ newContact });
}
render() {
const { contacts, newContact } = this.state;
const { name, email, phone } = newContact;
return (
<div>
<h2>Add Someone</h2>
<form onSubmit={this.handleSubmit}>
<input type="text" value={name} onChange={e => this.handleInput(e, 'name')} placeholder="name" />
<input type="text" value={email} onChange={e => this.handleInput(e, 'email')} placeholder="email" />
<input type="text" value={phone} onChange={e => this.handleInput(e, 'phone')} placeholder="phone" />
<button type="submit">Submit</button>
</form>
<h2>Exsiting contacts:</h2>
<ul>
{contacts.map((contact) =>
<li>{`Name: ${contact.name} Email: ${contact.email} Phone: ${contact.phone}`}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(<Form />, document.getElementById('root'));
现场演示:http://codepen.io/ilanus/pen/LRjkgx http://codepen.io/ilanus/pen/LRjkgx
我强烈建议使用第一个示例。因为它的性能会更好:)