无法在 REACT.js 中输入和获取值
Posted
技术标签:
【中文标题】无法在 REACT.js 中输入和获取值【英文标题】：unable to get enter and get value in REACT.js 【发布时间】：2018-09-03 14:27:33 【问题描述】：我是 ReactJS 的新手，正在尝试构建示例应用程序 我无法在文本框中输入值，也无法在警报中获取值。难道我做错了什么。我已经尝试过 React.Js Form 上给出的示例，但没有工作。
import React, Component from "react";
class AddNewStudent extends Component
constructor(props)
super(props);
this.state = value:'';
this.OnSubmit = this.OnSubmit.bind(this);
OnSubmit(event)
alert('name value is : '+this.state.value);
event.preventDefault();
render()
return(
<div>
<form onSubmit=this.OnSubmit>
<fieldset className="Student-Form" id=this.props.id>
<legend className="Legend">Add mew student</legend>
<div>
<div className="Block">
<div className="Float-Left">
<label>
<span>Name : </span>
<input type="text" value=this.state.value />
</label>
</div>
</div>
<div className="clearFix" />
<div className="Block">
<div className="Float-None">
<label>
<input type="submit" value="Save" />
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
);
export default AddNewStudent;
【问题讨论】：
【参考方案1】：请更改：
<input type="text" value=this.state.value />
到：
<input type="text" value=this.state.value onChange = this.onChange/>
在您的班级中，添加“onChange”函数：
onChange(e)
this.setState(
value: e.target.value
)
在你的构造函数中：
this.onChange = this.onChange.bind(this)
编辑 1： 请检查我的密码笔here
编辑 2： 如果输入太多，可以使用这样的函数：（这只是一个粗略的示例，在现实世界中我将创建一个新组件来一起处理）
//in your constructor
this.state =
//in class 'controlled component way'
createInput(num)
let inputArray = []
for(let i = 0; i < num; i ++)
inputArray.push(<input key = i name = i onChange = this.onChange value = this.state[i] || '' />)
return inputArray
onChange(e)
let key = e.target.name
let newState =
newState[key] = e.target.value
this.setState(newState)
// in your render function
return <div>
this.createInput(100)
</div>
查看我的代码笔 here 以获取此示例
当然，您也可以使用不受控制的组件来执行此操作。 controlled component and uncontrolled
【讨论】：
嗨，我试过这个东西，但它根本不起作用。当我尝试所有这些时，我无法在 html 的文本框中添加任何文本任何值，当我删除“value = this.state.value”时，我可以在 html 输入中输入一些值 我在 codepen 中做了一个示例代码。并在我的答案中进行了编辑。请检查一下。@ManishKumarNamdev 谢谢，但这是否意味着如果我正在创建一个表单并且我有 10 个输入控件，那么我需要创建 10 个 onChange 事件来设置 setState... 是不是很奇怪.. 或者可能是我做得不好..如果一般如果您在记事本中添加一种html输入类型的文本控件并将其保存为html并运行它，那么您会看到一个带有输入框的html页面并且您可以输入文本..简单.和这个有什么不同？ 当我改变这样的代码时：我已经放置了这一行 this.setState(value:event.target.value);在 OnSubmit 方法中并从输入框中删除了 onChange 方法然后再次无法输入文本 有很多方法可以解决这个问题。在我的 codepen 示例中，我添加了一个新方法，即为另一个 使用“ref”。请检查一下。如果你有很多输入，你也可以为你做一个函数。【参考方案2】：您可以将onChange 事件绑定到您的输入或setState 提交值时，您不能像那样更改状态
把你的代码改成这样的
import React, Component from "react";
class AddNewStudent extends Component
constructor(props)
super(props);
this.state = value:'';
this.OnSubmit = this.OnSubmit.bind(this);
OnSubmit(event)
this.setState(value: this.refs.infield.value,()=>
alert('name value is : '+this.state.value);
)
event.preventDefault();
render()
return(
<div>
<form onSubmit=this.OnSubmit>
<fieldset className="Student-Form" id=this.props.id>
<legend className="Legend">Add mew student</legend>
<div>
<div className="Block">
<div className="Float-Left">
<label>
<span>Name : </span>
<input type="text" ref = "infield"/>
</label>
</div>
</div>
<div className="clearFix" />
<div className="Block">
<div className="Float-None">
<label>
<input type="submit" value="Save" />
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
);
export default AddNewStudent;
【讨论】：
【参考方案3】：您好，要获取值，请在输入中添加名称和 onChange 函数以将值设置为状态，然后在 onsubmit 函数中执行您想要的任何操作 我现在不能给你写一个工作代码，因为我正在使用我的手机，但这会有所帮助
onfieldchange(e)
this.setState([e.target.name]: e.target.value);
onaSubmit() //在这里做你的代码
…… ....
<input type="text" name="firstName" value=this.state.firstName />
希望对你有帮助
【讨论】：
【参考方案4】：reactjs 中处理表单元素有两种方式： 受控和非受控组件（使用 refs）。在受控组件方法中，您必须将输入字段的状态添加到输入字段值和 onChange 事件，这是您尝试做的事情。这是工作代码.
import React, Component from "react";
class AddNewStudent extends Component
constructor(props)
super(props);
this.state =
firstname:''
;
this.OnSubmit = this.OnSubmit.bind(this);
this.OnChange = this.OnChange.bind(this);
OnSubmit(event)
alert('name value is : '+this.state.firstname);
event.preventDefault();
OnChange()
this.setState(
[e.target.name] : [e.target.value]
);
render()
return(
<div>
<form onSubmit=this.OnSubmit>
<fieldset className="Student-Form" id=this.props.id>
<legend className="Legend">Add mew student</legend>
<div>
<div className="Block">
<div className="Float-Left">
<label>
<span>Name : </span>
<input type="text"
name="firstname"
value=this.state.firstname
OnChange=this.OnChange
/>
</label>
</div>
</div>
<div className="clearFix" />
<div className="Block">
<div className="Float-None">
<label>
<input type="submit" value="Save" />
</label>
</div>
</div>
</div>
</fieldset>
</form>
</div>
);
export default AddNewStudent;
【讨论】：
以上是关于无法在 REACT.js 中输入和获取值的主要内容，如果未能解决你的问题，请参考以下文章
react.js 下获取各种input控件的值 radio、checkbox等
React js，如何在输入更改时更新状态对象值？ [复制]