Question

我想读取字段值并将每个字段值推送到字段数组。添加值后，还要将字段输入重置为空。如何读取字段值并在“删除”按钮中显示。我用过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>