Skip to content

Latest commit

 

History

History
41 lines (37 loc) · 1.02 KB

File metadata and controls

41 lines (37 loc) · 1.02 KB
class Demo extends React.Component {
 // a = 1
 /*
 React.createRef调用后可以返回一个容器,该容器可以存储被ref所表示的节点
 */
 myRef = React.createRef(); // 该容器是“专人专用”
 // 展示左侧输入框的数据
 showData = () => {
  console.log(this.myRef.current) // <input type="text" placeholder="点击">
  //this.myRef.current.value

  const {input1} = this
  alert(input1.value)
 }
 // 展示右侧输入框的数据
 showData2 = () => {
  const {input2} = this
  alert(input2.value)
 }

 saveInput = (c) => {
  this.input1 = c;
  console.log('dada', c);
 }
 render() {
  return (
   <div>
    <input ref={this.myRef} type="text" placeholder="点击"/>
    <input ref={c => this.input1 = c} type="text" placeholder="点击"/>
    <button onClick={this.showData}>点击</button>
    <input onBlur={this.showData2} ref={c => this.input2 = c} type="text">

    <input ref={this.saveInput} type="text"/>
   </div>
  )
 }
}
ReactDOM.render(<Demo a="1" b="2"/>, document.getElementById('test'))