Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/421.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在react js中获取动态生成的输入字段的值?_Javascript_Reactjs - Fatal编程技术网

Javascript 如何在react js中获取动态生成的输入字段的值?

Javascript 如何在react js中获取动态生成的输入字段的值?,javascript,reactjs,Javascript,Reactjs,Hii我是React Js新手,在选择countInputCount之后,我已经动态生成了输入字段。现在我想获取输入字段的值,并且我想验证所有字段 import React, { Component } from 'react'; class App extends Component { constructor(props) { super(props); this.onChangeCount = this.onChangeCount.bind(thi

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>)
                                })
                            )}
import React,{Component}来自'React';
类应用程序扩展组件{
建造师(道具){
超级(道具);
this.onchangecont=this.onchangecont.bind(this);
this.onSubmit=this.onSubmit.bind(this);
this.state={,
输入计数:“”,
}
}
更改次数(e){
这是我的国家({
输入计数:e.target.value,
})
}
render(){
让选项1=[]
对于(设j=0;j{
返回(

) }) )}
请帮助我从输入字段中获取值,并验证表单

现在我想得到输入字段的值

要单独处理每个字段,您需要对所有字段进行唯一命名。因此,字段的JSX需要为每个字段具有一个独特的
name
属性:

选项1.map((i)=>{
返回(

) })
现在,每个
输入
元素将具有该元素唯一的
名称
属性。假设
选项1
包含值0到2:

  • name-0
  • 数字-0
  • 名称-1
  • 1号
  • 姓名-2
  • 第二卷

通过与循环索引相结合,您将获得字段的值。

名称输入字段唯一

映射
项时,不要忘记使用

类应用程序扩展了React.Component{
建造师(道具){
超级(道具);
this.onchangecont=this.onchangecont.bind(this);
this.onSubmit=this.onSubmit.bind(this);
此.state={
输入数量:2,
}
}
更改次数(e){
this.setState({InputCount:e.target.value})
}
handleChange=(e)=>{
console.log('name:',e.target.name,'value:',e.target.value)
//你想在这里干什么就干什么
}
render(){
让选项1=[]
对于(设j=0;j{
返回(

)})}
)}}
在哪里使用了
onchangecont
?那么
handleChange
做什么呢?您应该给出更清晰的代码。对于测试,我尝试过,先生,现在我编辑了我的代码,请帮助我。关于获取字段值的问题与关于验证的问题是分开的。我建议您创建一个新问题,询问如何验证字段。