Question

我已经完成了动态输入，现在我的问题是得到每个输入的值，但它是多个输入？我该怎么做到这一点。这是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

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

Answer 2

是的，您可以获得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)
        }

Checck以下示例，这将帮助您确定Demo done by mayankshukla

Answer 3

这里是使用react钩子的工具，希望这也会有所帮助。

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变量中
然后，使用values将最后的value保存在setValue内

ReactJS在动态多输入中获取值

3 个答案: