在 React.js 中检索复选框的值

Posted 2023-03-05

【中文标题】在 React.js 中检索复选框的值

【英文标题】：Retrieving value of checkbox in React.js

【发布时间】：2017-01-09 02:38:40

【问题描述】：

我想在复选框被选中时检索它的值。

我正在使用这个“http://react-component.github.io/checkbox/”。

我的代码如下所示。

<div className="user_box">
     check.map((values , i)=> 
        return <Checkbox
            name = "checkbox"
            onChange=this.checkvalue.bind(this)
            value=values.username 
        />
    )
</div>

我的功能：

checkvalue(e)
    // var all_users = [];
    // var value = this.checkbox.value;
    // all_users.push(value);
    // console.log(all_users);

    console.log('checkbox checked:', (e.target.checked));

我不明白如何检索复选框的值。

【问题讨论】：

嘿，你能做一个 jsfiddle/code sn-p 以便我们帮助你吗？ :)

在 jsfiddle 上很难解释，因为。我无法解释，我想要什么输出

使用默认的e.target.value，每次只获取on的值

【参考方案1】：

我们可以通过在输入元素属性上声明onChange=this.likeClicked defaultChecked=false来获取复选框值

  constructor(props)
    super(props)
    this.likeClicked = this.likeClicked.bind(this)
  

  likeClicked()
    console.log(event.target.checked, event.target.id);
  

  render()
    return (
      <div className='px-3'>
          <div className='item-header item-wrapper cirle'>
            <input type="checkbox" onChange=this.likeClicked  defaultChecked=false  className="checkbox" id=`checkbox_$this.props.product.sku` />
            <label htmlFor=`checkbox_$this.props.product.sku`><HeartIcon className="heart-svg"></HeartIcon></label>
          </div>
      </div>
    );
  

【参考方案2】：

使用合成事件参数，这里是一个例子：

const element1 = "boy";
const element2 = "girl";

<input
 type="checkbox"
 name=element1
 value=element1
 onChange=this.handleChange
/>
<label for="element" style= fontSize: 35 >
element2
 </label>

<input
 type="checkbox"
 name=element2
 value=element2
 onChange=this.handleChange
/>
<label for="element" style= fontSize: 35 >
element2
 </label>




handleChange = (e) => 
// to find out if it's checked or not; returns true or false
const checked = e.target.checked;

// to get the checked value
const checkedValue = e.target.value;

// to get the checked name
const checkedName = e.target.name;

//then you can do with the value all you want to do with it.
;

【参考方案3】：

试试这个：

getChckeboxValue(event) 
    const value = event.target.value;

在渲染中：

<input onClick=this.getChckeboxValue.bind(this) type="checkbox" value="Text" />

【参考方案4】：

您需要将“e, Synthetic 事件参数传递给您的处理程序”：

handleChange(e) 
  let isChecked = e.target.checked;
  // do whatever you want with isChecked value


render() 
  // ... your code here
  return (
    /* your other jsx here */
    <Checkbox otherProps onChange=e => this.handleChange(e) />
    /* your other jsx here */
  );

【讨论】：

当我们将onChange 属性更改为onChange=this.handleChange 时，同样的效果，您能解释一下原因吗？它们有何不同？

@PrameshBajracharya 因为使用 this.handleChange 传递一个函数，而 onChange 需要一个函数。 I/O 是兼容的，因此它的工作原理。