react input绑定数组值,并且支持输入
//react通过input修改数组里的某一个值
import React ,{Component} from 'react';
import { Input } from 'antd';
class Demo4 extends Component{
constructor(props){
super(props);
this.state = {
arr:[
{
name:'lili',
age:'18',
sex:'女'
}, {
name:'cyli',
age:'16',
sex:'男'
}, {
name:'coco',
age:'20',
sex:'女'
}
],
};
}
inputChange(item,index,e){
console.log("修改后的值为:",e.target.value);
const { arr } = this.state;
arr[index]['name'] = e.target.value;
let newArr = arr;
this.setState({
arr:newArr
})
}
render() {
return (
<div className='header'>
<table border="1" style={{width:'100%'}}>
<tbody>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
{
this.state.arr?
this.state.arr.map((item,index)=>{
return (
<tr key={index}>
<td><Input value={item.name} onChange={this.inputChange.bind(this,item,index)}/></td>
<td><Input value={item.age}/></td>
<td><Input value={item.sex}/></td>
</tr>
)
}):null
}
</tbody>
</table>
</div>
)
}
}
export default Demo4;