如何将字段值添加到逐行显示的数组中答案

【问题标题】：How to add Field value to a array that shows row by row如何将字段值添加到逐行显示的数组中
【发布时间】：2017-02-15 07:11:56
【问题描述】：

我正在尝试读取字段值并将每个字段值推送到字段数组。添加值后还将字段输入重置为空。如何读取字段值并在“删除”按钮处显示。我使用了 field.firstname。请参考以下链接

const renderMembers = ({fields}) => (
    <div>
    <h2>Members</h2>
    <Field name="firstName" component='input' type='text' />
    <button onClick={() => fields.push({--add Field value here and push to array---})}>add</button><br />
      {fields.map((field, idx) => (
        <div key={idx}>
         --display added value here---
            <button onClick={() => fields.remove(idx)}>remove</button><br />
        </div>
    ))}
    </div>
)

const Form = () => (
  <FieldArray name='members' component={renderMembers} />

)

const MyForm = reduxForm({
    form: 'foo',
  initialValues: {
    members: [
        {}
    ]
  }
})(Form)

【问题讨论】：

jsfiddle.net/Mahaboob/75rh036o/7
请添加代码作为问题的一部分，而不是在外部网站上
HI Alistra 添加了代码，请检查

标签： reactjs redux redux-form

【解决方案1】：

我能够将值连接到单个数组中，现在我正在尝试将值推送到多维数组。

class CustomerTable extends Component{
constructor(props){
super(props)
this.state={
contact:[{"name":"Name0","number":12344}],
user:''
}
}

addTask(){
var sel=document.getElementById('scripts');
this.setState({
contact:this.state.contact.concat([this.refs.customer.value,sel.options[sel.selectedIndex].text])
})
}
onChange(event){
this.setState({user:event.target.value})
}

render(){
retrun(
<div>
<select id="scripts" ref="customer" name="contact" onChange={this.onChange}>
    <option value="number1">Name1</option>
    <option value="number2">Name2</option>
    <option value="number3">Name3</option>
</select>
</div>
)
}
}
---Displaying the data-----
<div>
    {this.state.contact.map((user,taskIndex)=>
    <ul key={taskIndex}>
        <li>{user}</li>
        <li><Button onClick={this.deleteTask.bind(this)} value={taskIndex}>Del</Button></li>
    </ul>
    )}
</div>

【讨论】：