时间戳

首页 > 解决方案 > 如何在反应中使用一个函数处理数组中的多个输入

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

问题描述

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

我正在做出反应。我试图制作一组输入，我只需一个函数就可以从中获取值。

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。有什么建议、提示、帮助吗？谢谢！:)

标签： javascriptreactjs

解决方案

您的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)
            ]
        });
    }
  }

演示

推荐阅读