ReactJS 在动态多个输入中获取值答案

【问题标题】：ReactJS Get values inside dynamic multiple inputsReactJS 在动态多个输入中获取值
【发布时间】：2018-08-30 03:30:18
【问题描述】：

我已经完成了动态输入，现在我的问题是获取每个输入的值，但它是多个输入？我怎样才能做到这一点。这是jsfiddle。

 perRow() {
        return this.state.values.map((el,i) => 

                <tr key={i}>

                    <td className="col-md-4">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Name" value={el||''} onChange={this.handleChange.bind(this, i)}/>
                        </div>
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Hourly Rate" />
                        </div>                        
                        <p><strong>Total hours:</strong> 0:00</p>
                        <p><strong>Total pay:</strong> $0.00</p> 
                            <button className="btn btn-danger do-not-print" onClick={this.removeClick.bind(this, i)}>Remove employee</button>
                    </td>
                    <td>Monday</td>
                    <td><input type="text" className="form-control" /></td>
                    <td><input type="text" className="form-control" /></td>
                    <td><input type="text" className="form-control" /></td>
                    <td>0:00</td>
                    <td>$0.00</td>
                </tr>

        )
    }

https://jsfiddle.net/zd208m1a/2/?utm_source=website&utm_medium=embed&utm_campaign=zd208m1a

【问题讨论】：

dynamic input elements的可能重复
动态但单一的元素。我需要动态多输入元素的帮助
working fiddle，如果您有任何疑问，请告诉我:)
@MayankShukla 酷！非常感谢！感谢你的帮助！是的，我错过了一些东西！

标签： javascript arrays reactjs loops object

【解决方案1】：

首先，创建constructor，我们将创建一个onChange函数，所以我们需要在构造函数中绑定它

constructor(props){
    super(props);
    this.state = {
        username: '',
        password: '',
    };
    this.onChange = this.onChange.bind(this);
}

然后我们需要创建onChange 函数，它将按名称处理

onChange(e){
        this.setState({ [e.target.name] : e.target.value });
    }

最后调用带有name属性的onChange函数，需要在状态中定义输入名称，以免麻烦。

<td><input type="text" className="form-control" name="username" onChange={this.onChange} /></td>

<td><input type="text" className="form-control" name="password" onChange={this.onChange} /></td>

2_ 替代方法，而不是在构造函数中绑定onChange 函数，您可以使用像这样的匿名箭头函数

onChange = (e) => {
        this.setState({ [e.target.name] : e.target.value });
    }

3_ 另一种替代方式，你可以这样绑定

onChange(e){
   this.setState({ [e.target.name] : e.target.value });
}       

<input 
    type="text" 
    name="username" 
    onChange={this.onChange.bind(this)} 
/>

4_ 另一种传递数据的替代方式

onChange(e,data){
console.log(data); // result is "something"
   this.setState({ [e.target.name] : e.target.value });
}       

<input 
    type="text" 
    name="username" 
    onChange={(e)=>this.onChange(e, 'something')} 
/>

【讨论】：

请看我的jsfiddle。我的问题在于我将拥有多个用户名和密码
你的意思是你有两个问题吗？上面的答案将使您能够根据输入属性名称创建多个输入
是的，但我的问题是它是动态的。示例：在一行中，我输入了用户名和密码，然后当我单击按钮添加行时，我将再次输入用户名和密码。在我当前的代码中，我已经解决了添加输入行的问题，现在我的问题是获取每个对象数组中的值。
好的，我现在明白你了，你只是想保留以前的数据并添加新数据。对吗？像 [ 'PrevData', 'NewDate', 'NewNew' ]

【解决方案2】：

这里是使用 react hook 的实现，希望对你也有帮助。

const [value, setValue] = useState([])

const handleChange = (i, event) => {
 let values = [...value];
 values[i] = e.target.value;

 setValue(values)
 console.log(values)
}

在多个输入文本中获取值的步骤：

使用空元素数组创建状态。
onChange 运行时...
将value 状态复制到可变变量中。 es6 中的示例let values = [...value]
当e.target.value 完成时
根据索引总数，value 保存在 values 变量中
然后，使用setValue 将最终的values 保存在value 中

【讨论】：

【解决方案3】：

是的，您可以获取您的输入值，例如 this.state.values.join(', ')

因为您将状态值中的输入值作为数组获取

 handleChange(i, event) {
            let values = [...this.state.values];
            values[i] = event.target.value;
            this.setState({ values });
            console.log(this.state.values)
        }

检查下面的例子，这肯定会帮助你Demo done by mayankshukla

【讨论】：