zoukankan      html  css  js  c++  java
  • React学习:form表单

    在React中,form表单元素和其他的DOM不一样,因为表单元素通常会保留一个内部的state状态。

    1.受控组件

    class NameForm extends React.Component {
      constructor(props) {
        super(props);
        this.state = {value: ''};
    
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    
      handleChange(event) {
        this.setState({value: event.target.value});
      }
    
      handleSubmit(event) {
        alert('提交的名字: ' + this.state.value);
        event.preventDefault();
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              名字:
              <input type="text" value={this.state.value} onChange={this.handleChange} />
            </label>
            <input type="submit" value="提交" />
          </form>
        );
      }
    }

    对于受控组件的好处是:每一个表单都有一个单独处理它的state,这样比较容易方便进行用户输入的校验和限制

    2.textarea标签

    <textarea value={this.state.textarea} onChange={this.handleChange} />

    3.select标签

    与vue类似,所有选中以及change都在select根节点标签上

    //2.select
    class FlavorForm extends React.Component {
        constructor(props) {
          super(props);
          this.state = {value: 'coconut'};
      
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }
      
        handleChange(event) {
          this.setState({value: event.target.value});
        }
      
        handleSubmit(event) {
          alert('你喜欢的风味是: ' + this.state.value);
          event.preventDefault();
        }
      
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                选择你喜欢的风味:
                <select value={this.state.value} onChange={this.handleChange}>
                  <option value="grapefruit">葡萄柚</option>
                  <option value="lime">酸橙</option>
                  <option value="coconut">椰子</option>
                  <option value="mango">芒果</option>
                </select>
              </label>
              <input type="submit" value="提交" />
            </form>
          );
        }
    }

    注意:可以将数组传至select的value中,它支持多选:<select multiple={true} value={['B', 'C']}>

    4.input文件标签

    <input type=“file”>,此标签为只读标签,故分类是在非受控组件。

    5.处理多个输入

    //3.处理多个输入
    class Reservation extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            isGoing: true,
            numberOfGuests: 2,
            name:"haha"
          };
      
          this.handleInputChange = this.handleInputChange.bind(this);
        }
      
        handleInputChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
      
          this.setState({
            [name]: value
          });
        }
      
        render() {
          return (
            <form>
              <label>
                参与:
                <input
                  name="isGoing"
                  type="checkbox"
                  checked={this.state.isGoing}
                  onChange={this.handleInputChange} />
              </label>
              <label>
                名字:
                <input
                  name="name"
                  type="text"
                  value={this.state.name}
                  onChange={this.handleInputChange} />
              </label>
              <br />
              <label>
                来宾人数:
                <input
                  name="numberOfGuests"
                  type="number"
                  value={this.state.numberOfGuests}
                  onChange={this.handleInputChange} />
              </label>
            </form>
          );
        }
      }
  • 相关阅读:
    呕心沥血,nginx自动重启脚本唯一值
    tar打包命令,过滤某类文件命令
    Linux/centos/ubuntu全系列 配置 history 命令显示操作时间、用户和登录 IP大全
    nginx-301/304/302-目录、文件跳转那些事之温习
    2021/4/28最新elk7.12搭建配置grok正则及坑总结!
    nginx配置上线直播【移动端/pc分别访问】
    Postgresql 导入导出/创建库等基本使用小记,一看就懂,一学就会!
    MangoDB 容器备份一看就懂,一学就会!
    ignav中IMU与GNSS间的杆臂
    RTKLIB中质量控制函数之——testsnr()函数
  • 原文地址:https://www.cnblogs.com/liyaping/p/11596364.html
Copyright © 2011-2022 走看看