javascript - 如何使用React中的一个函数处理数组中的多个输入

Question

我爸爸给了我一个作业，让他制作一个可以计算房屋账单的应用程序，所以我在每行中有一个标题和 2 个输入。我可以在状态中创建一个对象数组并从另一个组件调用它们，然后将它们映射出来并从中获取值吗？

我正在 react 中工作。我尝试创建一组输入，只需一个函数即可从中获取值。

state = {
ponovo: [
    {
      id: 1,
      title: 'Izaberi ponovo 1:  ',
      iznos: '' 
    },
    {
      id: 2,
      title: 'Izaberi ponovo 2:  ',
      iznos: ''
    },
    {
      id: 3,
      title: 'Izaberi ponovo 3:  ',
      iznos: ''
    }
  ]}



handleChange = (id, iznos, event, title) => {
this.setState({
  ponovo: this.state.ponovo.map(ponovo => {
    if (ponovo.id === id) {
      ponovo.iznos = iznos
      return (
        { iznos: event.target.value }
      );
    } return ponovo;
  })
});
console.log(id, iznos, title);}


<Ponovo ponovo={this.state.ponovo} handleChange={this.handleChange} />


//Ponovo.js
{this.props.ponovo.map((ponovo) => (
                    <Ponova key={ponovo.id} ponovo={ponovo} handleChange={this.props.handleChange} />))}

//Ponova.js

{title}
<input type='Number' value={iznos} onChange ={this.props.handleChange.bind(this, title, iznos, id, completed)} />
            {iznos}

我无法输入这些输入中的值，或者无法从中获取值。 我认为问题出在我的handleChange函数中，我将它们与它们的id匹配，但由于某种原因我不能在它们上使用event.target.value。 有什么建议、提示、帮助吗？ 谢谢! :)

Answer 1

您的handleChange函数应该只从子组件中获取id和e(事件)，使用您的id可以更改父组件中的状态。

  handleChange = (e,id) => {
    console.log(e.target.value);
    var index = this.state.ponovo.findIndex(ponovo => ponovo.id === id);
    if (index === -1) {
        // handle error
    } else {
        this.setState({
            ponovo: [
                ...this.state.ponovo.slice(0, index),
                Object.assign({}, this.state.ponovo[index], { iznos: e.target.value}),
                ...this.state.ponovo.slice(index + 1)
            ]
        });
    }
  }

Demo