react单选框获取值

最新推荐文章于 2024-04-24 15:37:39 发布

weixin_30919919

最新推荐文章于 2024-04-24 15:37:39 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/luguankun/p/11161835.html

博客介绍了React相关知识，提到input每种类型都要绑定onChange事件，且需传入事件对象，单选框要绑定checked属性，还给出循环input选项的写法，并提供了转载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react的input的每一种类型都要绑定onChange事件的，绑定onChange事件要传入事件对象的

react的单选框需要绑定checked属性的

import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      sex:"0" // 定义选中的值，如果为空字符串，则默认不选中
     }
  }
  render() { 
    return (
        <div>
          <input type="radio" name="" value="0" checked={this.state.sex==0} onChange={(e)=>this.getValue(e)}/><label htmlFor="man">男</label>
          <input type="radio" name="" value="1" checked={this.state.sex==1} onChange={(e)=>this.getValue(e)}/><label htmlFor="woman">女</label>
        </div>
      );
  }
  getValue=(event)=>{
    //获取单选框选中的值
    console.log(event.target.value);
    this.setState({
      sex:event.target.value
    })
  }
}
 
export default App;

循环input选项的写法：

import React, { Component } from 'react'
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: ["星期一", "星期二", "星期三"],
      item: "1"
    }
  }
  render() {
    return (
      <div>
        {
          this.state.items.map((ele, index) => {
            return (
              <p key={index}>
              {/* 如果控制台有警告 Expected '===' and instead saw '=='  eqeqeq 不用改成三个等号 */}
                <input type="radio" name="group" value={index} checked={this.state.item == index} onChange={(e) => this.getValue(e)} /><span>{ele}</span>
              </p>
            )
          })
        }
      </div>
    );
  }
  getValue = (e) => {
    this.setState({
      item: e.target.value
    })
  }
}

export default App;