Question

我正在尝试使用语义UI对布局进行反应。这些是我在onChange遇到麻烦的以下示例代码。我可以检查一下是否单击切换开关，但是每次刷新时都会重置。

import {
  Checkbox
} from 'semantic-ui-react'

onChangeInput(event) {
    let name = event.target.name
    let value = event.target.value

    let talent = this.state.newTalentProfile
    talent[name] = value

    this.setState({
      newTalentProfile: talent
    })

  }
  
  <Select
name = "willing_to_relocate"
ref = "willing_to_relocate"
defaultValue = {this.props.talent.willing_to_relocate}
onChange = { this.onChangeInput.bind(this)} >
  <Option value = ""label = "" / >
  <Option value = "YES"label = "YES" / >
  <Option value = "NO"label = "NO" / >
  </Select>

the below code doesn't work, but the above one works when i make changes it saves it to database

<Checkbox toggle
name = "willing"
ref = "willing"
label = "Willin To Relocate"
onChange = {this.onChangeInput.bind(this)
}

/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

Answer 1

您的代码建议您将event.target视为复选框元素，但并非如此。如果在浏览器中检查变量event.target，您会注意到它指向label元素，而不是复选框本身。因此，我猜测您的event.target.value和event.target.label的评估结果为null，导致其余代码无法按预期方式运行。

有很多方法可以解决此问题。一种方法是为组件设置状态变量以表示复选框的状态：

class TheComponentThatContainsMyCheckbox extends Component {
    state = {
     textValue: null,
     willingToRelocate: true
    }
...

然后，您可以创建一个处理程序，该处理程序在选中时会切换此状态：

toggleCheckBox = () => {
  const willingToRelocate = !(this.state.willingToRelocate);
  this.setState({willingToRelocate}); 
  // Note: if you have other logic here that depends on your newly updated state, you should add in a callback function to setState, since setState is asynchronous
}

请注意，我在这里使用箭头语法，它将自动为我绑定this。然后，将其连接到语义UI复选框的onChange事件：

<Checkbox label='Willing to Relocate.' onChange={this.toggleCheckBox}/>

您现在可以使用this.willingToRelocate状态来决定其他应用程序逻辑，并使用您喜欢的任何状态管理模式（状态容器/存储（例如Redux，React Context等））将其向上或向下传递。

Answer 2

  onChangeCheckbox = (evt, data) => {
    let checked = data.checked
    console.log(checked)
  }


 <Checkbox toggle label='Running discounted price?' 
  onClick={(evt, data)=>this.onChangeCheckbox(evt, data)}
   />

这应该可以解决问题。

Answer 3

我假设您的this.onChangeInput处理数据库更新。

语义ui react为Checkbox提供了道具checked。

您应该在代码中将状态设置为{checked：false}，然后在检索数据库记录后将this.setState的状态设置为componentDidMount中的状态。

将this.state.checked传递到Checkbox的checked属性中。

如何使用语义UI React Checkbox切换？

3 个答案: