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

ymdaylpp 于 2023-02-02 发布在 Java

关注(0)|答案(5)|浏览(122)

我希望在选中复选框时检索该复选框的值。
我正在使用这个“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));
}

我不知道如何检索复选框的值。

JavaScript

来源：https://stackoverflow.com/questions/39267669/retrieving-value-of-checkbox-in-react-js

5条答案

按热度按时间

7uhlpewt1#

您需要将“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 */}
  );
}

赞(0）回复(0）举报 2023-02-02

v7pvogib2#

使用合成事件参数，示例如下：

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.
};

赞(0）回复(0）举报 2023-02-02

a64a0gku3#

试试这个：

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

在渲染中：

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

赞(0）回复(0）举报 2023-02-02

kkih6yb84#

我们可以通过在输入元素属性上声明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>
    );
  }

赞(0）回复(0）举报 2023-02-02

8ftvxx2r5#

一个内衬：

onChange={e => doSomethingWithValue( e.currentTarget.checked )}

赞(0）回复(0）举报 2023-02-02

我来回答

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

5条答案

相关问题

热门标签

最新问答