Question

Hii，我是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

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

要分别处理每个字段，您需要对它们全部进行唯一命名。因此，您的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
rollnumber-0
name-1
rollnumber-1
name-2
rollnumber-2

您将通过interrogating the field by its name attribute获得该字段的值。

Answer 2

名称输入字段通过与循环索引结合而唯一。

并且不要忘记在key项目时使用map。

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>
)}}

如何获取React JS中动态生成的输入字段的值？

2 个答案: