React之入门第（二）篇

表单处理

1. 受控组件（推荐使用）

input框自己的状态被React组件状态控制

React组件存状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性

实现步骤

1. 在组件的state中声明一个组件的状态数据
2. 将状态数据设置为input标签元素的value属性的值
3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
4. 调用setState方法，将文本框的值作为state状态的最新值

类组件

import React from 'react'

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}


function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App函数

函数组件

import React, { useState } from 'react';
 
const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');
 
  const handleInputChange = (event) => {
    console.log(event.target.value);
    setInputValue(event.target.value);
  };
 
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Input value submitted:', inputValue);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="controlledInput">Enter text:</label>
          <input
            id="controlledInput"
            type="text"
            value={inputValue}
            onChange={handleInputChange}
          />
      <button type="submit">Submit</button>
    </form>
  );
};
 
export default ControlledForm;

1. 非受控组件（了解）

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

实现步骤

1. 导入createRef 函数
2. 调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
3. 为input添加ref属性，值为msgRef
4. 在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

类组件

import React, { createRef } from 'react'

class InputComponent extends React.Component {
  // 使用createRef产生一个存放dom的对象容器
  msgRef = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current.value)
  }

  render() {
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

函数组件

import React, { useRef } from 'react';
 
function NonControlledForm() {
  const inputRef = useRef(null);
 
  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Submitted: ' + inputRef.current.value);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
           <input ref={inputRef} type="text" name="name" />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}
 
export default NonControlledForm;