Question

我想显示基于某些条件检查的输入，但出现错误

这是我到目前为止所做的

checkSomeCondition(){

   if(...)
    return true
   else 
     return false

}
render(
   return(
      <Input type="checkbox" onClick={() =>{alert()}} checked={() => {this.checkSomeConditon}}>
)
)

我一直都在检查，不是因为checkSomcondition一直都返回true。即使checkSomeConditon返回false，我也会得到检查。

Answer 1

尝试将条件检查结果移动到render方法中的自变量中。

render(
   var checked = this.checkSomeCondition();
   return(
      <Input type="checkbox" onClick={() =>{alert()}} checked={checked}>
   )
)

Answer 2

render(
const { checked }=this.props.
const attribute = checked //or call your checkSomeCondition()
? {
 checked: true 
} : {};
render (
   return(
      <Input {...attribute} type="checkbox" onClick={() =>{alert()}}>
)
)

或者修复您的代码

checkSomeCondition(){

   if(...)
    return true
   else 
     return false

}
render(
   return(
      <Input type="checkbox" onClick={() =>{alert()}} checked={() => {this.checkSomeConditon()}}>
)
)

Answer 3

基本上，这就是您应如何处理react中的复选框

用false声明一个新的布尔状态变量
定义事件处理函数以在选中或未选中复选框时更改布尔状态变量值
将此状态布尔变量分配给输入元素的选中属性
确保您在构造函数中手动绑定了checkSomeCondition函数或将其更改为箭头函数
您的代码中的渲染语法不正确

您应该执行以下操作

    constructor(props){
          super(props);
          this.state= {
               booleanChecked: false
          }
    }
    checkSomeCondition = () => {
          this.setState({
              booleanChecked: !this.state.booleanChecked
          });
    }
    render(){
        return(
            <Input type="checkbox" onClick={() => this.checkSomeCondition()} checked={this.state.booleanChecked}>
       )
    }

Answer 4

我认为这是可行的。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  checkSomeCondition(){

   if(10>2){return true}

   else 
     {return false}

}
render(){
  return (
  <input type="checkbox" onClick={() =>{alert()}} checked={this.checkSomeConditon} />
  );
}

}


ReactDOM.render(<App />, document.getElementById('app'));

希望这会有所帮助！

如何显示条件检查

4 个答案: