javascript - 如何获取反应js中动态生成的输入字段的值？

Question

嗨，我是 React Js 的新手，在选择 count 后InputCount，我​​动态生成了输入字段。现在我想获取输入字段的值，并且我想验证所有字段。

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.onChangeCount = this.onChangeCount.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {,
            InputCount: "",
        }
    }
    onChangeCount(e) {
        this.setState({
            InputCount: e.target.value,
        })
    }
    render() {
            let options1 = []
            for (let j = 0; j <= this.state.InputCount; j += 1) { options1.push(j); }
            return (
        {this.state.InputCount && (
                                options1.map((i) => {
                                    return (<div>
                                        <input type="text" name="name" placeholder="Name" /><br />
                                        <input type="text" name="name" placeholder="RollNumber" />
                                    </div>)
                                })
                            )}

请帮助我从输入字段中获取价值并验证表格。

Answer 1

通过结合循环索引来命名输入字段的唯一性。

并且不要忘记使用keywhenmap项目。

class App extends React.Component {
    constructor(props) {
        super(props);
        this.onChangeCount = this.onChangeCount.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.state = {
            InputCount: 2,
        }
    }
    onChangeCount(e) {
        this.setState({InputCount: e.target.value })
    }
  
   handleChange = (e) => {
     console.log('name: ', e.target.name, ' value:', e.target.value)
     // Do what you want here
   }
  
    render() {
      let options1 = []
      for (let j = 0; j <= this.state.InputCount; j += 1) { options1.push(j) }
      return (
        <div>
        {options1.map((i) => {
          return (
            <div key={`group-input-${i}`}>
              <input  onChange={this.handleChange} type="text" name={`${i}-name`} placeholder="Name" /><br />
              <input  onChange={this.handleChange} type="text" name={`${i}-rollNumber`} placeholder="RollNumber" />
            </div>
           )})}
        </div>
)}}

Answer 2

现在我想获取输入字段的值

要分别处理每个字段，您需要对所有字段进行唯一命名。因此，字段的 JSX 需要为每个字段具有不同的name属性：

options1.map((i) => {
    return (<div>
        <input type="text" name="name-{ i }" placeholder="Name" /><br />
        <input type="text" name="rollnumber-{ i }" placeholder="RollNumber" />
    </div>)
})

现在每个input元素都将具有name该元素唯一的属性。假设options1包含值 0 到 2：

• 名称-0
• 卷号-0
• 名称-1
• 卷号-1
• 名称-2
• 卷号-2

您将通过按属性查询该字段来name获取该字段的值。