react 跟踪表单的值

小鱼儿 2023-07-06 09:54 20阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

//跟踪表单的值
    import React, { Component } from 'react';
    
    class FlavorForm extends Component {
        constructor(props) {
          super(props);
          this.state = {value: ''};
       
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
        }
       
        //用onChange选择方法获取select用户点击的value，并赋给state
        handleChange(event) {
          this.setState({value: event.target.value});
        }
       
        //onSubmit事件获取state中的值
        handleSubmit(event) {
          console.log(this.state.value)
          event.preventDefault();
        }
       
        render() {
          return (
            <form onSubmit={this.handleSubmit}>
              <label>
                选择您最喜欢的网站
                <select value={this.state.value} onChange={this.handleChange}>
                  <option value="Google">Google</option>
                  <option value="Runoob">Runoob</option>
                  <option value="Taobao">Taobao</option>
                  <option value="Facebook">Facebook</option>
                </select>
              </label>
              <input type="submit" value="提交" />
            </form>
          );
        }
      }
    
      export default FlavorForm

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200217200923943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 react 跟踪表单的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

小鱼儿/ 2023年07月06日 09:54/ 0 赞/ 21 阅读

相关 React 受控表单组件

React 受控表单组件受控组件（Controlled Component）：组件的数据受到state组件状态的控制（组件的数据和state组件状态双向绑定）

刺骨的言语ヽ痛彻心扉/ 2023年01月01日 05:50/ 0 赞/ 163 阅读

相关表单之间值传递_表单之间的沟通

表单之间值传递 Modal forms offer specific features that we cannot have when displaying non-mod

素颜马尾好姑娘i/ 2022年12月06日 15:45/ 0 赞/ 176 阅读

相关 REACT_react表单数据绑定封装

import React from 'react'; class Index extends React.Component { state =

向右看齐/ 2022年10月12日 01:23/ 0 赞/ 239 阅读

相关浅谈React表单组件

表单组件不同于其他原生组件，可以通过用户交互发生变化，使响应用户交互的表单数据处理更加容易。 1、交互属性表单组件支持几个受用户交互影响的属性： 1) value

深碍√TFBOYSˉ_/ 2022年06月16日 03:44/ 0 赞/ 268 阅读

相关 React -- 表单

牢记：在React中，一切数据都是状态。应用表单组件 1、文本框 input&textarea mport React, { Component } fro

野性酷女/ 2022年06月12日 22:16/ 0 赞/ 221 阅读

相关 React 学习：react 表单

目标：写一个留言输入框表单获取输入框的值一、新建CommentBox.js import React from 'react' class

约定不等于承诺〃/ 2022年02月19日 09:55/ 0 赞/ 326 阅读

相关 react表单密码验证

表单验证：验证密码强度（通过组件方法，但是不够灵活，只限于简单使用） import React, { Component } from "react";

迈不过友情╰/ 2022年02月13日 15:55/ 0 赞/ 404 阅读

相关 react中使用AntD表单

react中使用AntD表单 1.双向数据绑定 render() { const { getFieldDecorator } = thi

àì夳堔傛蜴生んèń/ 2022年01月25日 18:13/ 0 赞/ 471 阅读

相关 react form表单

from表单 1、根据state设置input的值当在input标签中使用value={this.state.xx}时，不能直接这样设置,需要配

╰半夏微凉°/ 2021年07月25日 01:17/ 0 赞/ 712 阅读