Question

我已经输入了文本字段和Checkbox，当我们单击Checkbox时，该文本字段应该被禁用。但是我做不到，无法弄清楚我要去哪里。

我已经尝试过这种方式：

<FormControlLabel
                                        control={
                                            <Checkbox
                                                // checked={this.state.games=== -1 ? true : false}
                                                onChange={this.handleTextField}
                                                name="games" color="primary"
                                            />}
                                        label="all"
                                    />
                                }

 <TextField required type="number" name='games' variant="outlined"
                                        disabled={this.state.games === -1 ? true : false}
                                        placeholder="value"
                                        onChange={this.handleTextField}
                                    />

OnChange方法：

handleTextField = (e) => {

 this.setState({games: e.target.checked === true ? -1 : 0 || e.target.value})
}

仍然没有禁用文本字段。有人可以帮我这个查询吗？

Answer 1

this.state = {
  games: 0,
}

handleTextField = (e) => {
  this.setState({ textValue: e.target.value })
}

toggleCheckbox = () => this.setState({ games: this.state.games === 0 ? -1 : 0 });

<FormControlLabel
  control={
    <Checkbox
      checked={this.state.games === -1}
      onChange={this.toggleCheckbox}
      name="games"
      color="primary"
    />}
  label="all"
/>

<TextField required type="number" name='games' variant="outlined"
  disabled={this.state.games === -1}
  placeholder="value"
  onChange={this.handleTextField}
/>

如果您不介意，我会提出不同的想法。使用一个标志isCheckboxChecked。将其应用于输入复选框和文本字段。

更新：

我将答案更新为基于games的值

Answer 2

您需要在此处使用.setState更新状态值：

handleTextField = (e) => {
 this.setState({
   games: e.target.checked === true ? -1 : 0 || e.target.value
});}

如何使用reactjs单击复选框时禁用输入字段

2 个答案: