Question

我必须绑定value = {this.state.grade}，这样我可以在取消选中复选框时清除输入文本，但问题是我无法改变输入字段。如果我使用defaultValue，那么如何清除输入框？

http://jsbin.com/lukewahudo/1/edit?js,console,output

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      grade: 123
    }

  }
  handleInput(e) {
      //clear checkbox
    this.setState({
      grade: null
    })
  }


  render() {
    return (      
      <div>
      <div><input type="checkbox" onChange={this.handleInput.bind(this)}/></div>
      <div><input defaultValue={this.state.grade} value={this.state.grade} type="number" name="3" /></div>
      </div>
    );
  }
}

Answer 1

此处的解决方案是在两个输入上只有defaultValue和onChange函数。

您无法使用value和defaultValue（请参阅uncontrolled components documentation）。

class HelloWorldComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grade: 123,
    }
    this.handleInput = this.handleInput.bind(this);
    this.handleNumberChange = this.handleNumberChange.bind(this);
  }
  handleInput(e) {
      //clear checkbox
    this.setState({
      grade: null,
    })
  }

  handleNumberChange(event) { 
    this.setState({ 
      grade: event.target.value,
    });
  }


  render() {
    return (      
      <div>
        <div><input type="checkbox" onChange={this.handleInput}/></div>
        <div><input defaultValue={this.state.grade} onChange={this.handleNumberChange} type="number" name="3" /></div>
      </div>
    );
  }
}

我冒充构造函数绑定（this）（以避免在每个渲染时绑定）并在构造函数中设置props（因为如果你不这样做，你可能不会使用道具）

Answer 2

的变化：

1。使用onChange使用输入元素，否则它将是只读，如下所示：

onChange={e => this.setState({grade: e.target.value})}

2。删除defaultValue。

3。取消勾选复选框，而不是指定null指定空白值''。在清除字段之前，请选中e.target.checked，当取消选中复选框时，将返回错误。

使用此：

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      grade: 123
    }

  }
  handleInput(e) {
     if(!e.target.checked)
        this.setState({ grade: '' });
  }


  render() {
    return (      
       <div>
           <div><input type="checkbox" onChange={this.handleInput.bind(this)}/></div>
           <div><input value={this.state.grade} type="number" onChange={e => this.setState({grade: e.target.value})}/></div>
       </div>
    );
  }
}

ReactDOM.render(<HelloWorldComponent/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

Answer 3

您可以将此设置为 empty ，而不是null，如下所示。除非你需要，否则你不需要改变任何东西。

请查看下面的工作代码，

＆＃13;

class HelloWorldComponent extends React.Component {
  constructor(){
    super();
    this.state = {
      grade: 123
    }

  }
  handleInput(e) {
      //clear checkbox
    this.setState({
      grade: ''
    });
  }


  render() {
    return (      
      <div>
      <div><input type="checkbox" onChange={this.handleInput.bind(this)}/></div>
      <div><input defaultValue={this.state.grade} value={this.state.grade} type="number" name="3" /></div>
      </div>
    );
  }
}

ReactDOM.render( <HelloWorldComponent/>, document.getElementById('app'))

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

＆＃13;

复选框未选中时清除输入的反应

3 个答案: