Question

我正在尝试读取Field值并将每个字段值推送到Field数组。添加值后，还将Field输入重置为null。如何读取字段值并显示在＆＃34;删除＆＃34;按钮。我使用了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)

Answer 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>

如何将Field值添加到逐行显示的数组中

1 个答案: