Question

我正在尝试设置某人单击复选框时的状态。我可以使它与普通的复选框类型一起使用，但不能与语义ui一起使用，因为我的值以未定义的形式返回。 '输入名称未定义。输入值未定义。我想知道是否有人可以在这里帮助我。

谢谢！

import React, { Component } from 'react';
import { Input, Dropdown, TextArea, Form, Button, Header, Checkbox } from 'semantic-ui-react'

class PageTwo extends Component {
  constructor(props){
    super(props)
    this.state = {
      programAgreement: false;

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

    console.log(`Input name ${name}. Input value ${value}.`);

    this.setState({
      [name]: value
    });
  }

<Checkbox



placeholder="I Agree"
    name="programAgreement"
    type="checkbox"
    checked={this.state.programAgreement}
    onChange={this.handleInputChange} />
/>

Answer 1

每次onChange触发时，您可以有两个参数。

onChange(event: SyntheticEvent, data: object)
event
React's original SyntheticEvent.
data
All props and proposed checked/indeterminate state.

请尝试以下代码：

  handleInputChange(event,data) {
    this.setState({
      [data.name]: !data.checked
    });
  }

live demo

Answer 2

尝试使用第二个参数

handleInputChange(e, data) {
  console.log(data);
  const value = data.type === "checkbox" ? data.checked : data.value;
  const name = data.name;

  console.log(value);
  console.log(name);

  this.setState({
    [name]: value
  });
};

当我进行控制台登录时，event.target.value会返回带有语义UI的未定义

2 个答案: