react中的ref在input中的详解

• Z时代
• 2024-01-10
• 分类：综合

当我们在项目中遇见文本输入框的时候，获取时刻输入框中的值

1、受控组件

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }
 render() {
    return (
          <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
   handleChange(event) {
    this.setState({value: event.target.value});
  }
}

2、非受控组件

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }
 render() {
    return (
          <input 
　　　　　　　　　　type="text" 
　　　　　　　　　　ref={el=>this.input =el}

　　　　　　　　　　　placeholder="演出/艺人/场馆"//输入框中默认的value

　　　　　　 />
　　　　　　<button

　　　　　　　　　　onClick={

　　　　　　　　　　　　　this.Searchtitle.bind(this)

　　　　　　　　　　}

　　　　　　></button>
    );
  }
　　Searchtitle(){
　　　　console.log(this.input.value)  //实时的获取输入框中的值
　　}
}

以上是 react中的ref在input中的详解 的全部内容， 来源链接： utcz.com/z/381855.html