react获取input value值的二中方法
Posted fengshaopu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react获取input value值的二中方法相关的知识,希望对你有一定的参考价值。
· 第一可以用event
· 第二可以用ref
1.第一种ref
import './aap.css'
import React from 'react';
class examplePage extends React.Component
inputChange()
var username=this.refs.username.value
this.setState(
date: username
);
click2=()=>
alert(this.state.date);
render()
return (
<div className="App">
<br />
<h1>Hello, world!</h1>
<h1>现在的时间是:</h1> <h1 id="files"></h1>
<div id="input-border">
<input placeholder="请输入账号" ref='username' onChange=
()=>this.inputChange()/><br/>
<input placeholder="请输入密码" ref='password' onChange=
()=>this.inputChangev() /><br/>
<button onClick=this.click2>点击2</button>
</div>
</div>
);
export default examplePage;
第二种event
import './aap.css'
import React from 'react';
class examplePage extends React.Component
inputChange(e)
var username=e.target.value
this.setState(
date: username
);
click2=()=>
alert(this.state.date);
render()
return (
<div className="App">
<br />
<h1>Hello, world!</h1>
<h1>现在的时间是:</h1> <h1 id="files"></h1>
<div id="input-border">
<input placeholder="请输入账号" onChange=(e)=>this.inputChange(e)/><br/>
<input placeholder="请输入密码" onChange=(e)=>this.inputChangev(e) /><br/>
<button onClick=this.click2>点击2</button>
</div>
</div>
);
export default examplePage;
以上是关于react获取input value值的二中方法的主要内容,如果未能解决你的问题,请参考以下文章