Question

选中cat复选框后，需要发送CAT值。当未选中时，状态将恢复为空字符串。目前无法在事件上发送价值。这是到目前为止的代码：

var SL = React.createClass({

  getInitialState: function() {
     return {
       cat: '',
       dog: ''
     } 
  },


 sendCheckBoxValue: function(e){
   this.setState({
     cat: this.refs.textInput.value,
     dog: this.refs.textInput.value
   })
  },


 render: function () {
   return (
    <div>
    <p><input type="checkbox" ref="textInput" value={this.state.cat} onChange={this.sendCheckBoxValue}/>CAT</p> 
    <p><input type="checkbox" ref="textInput" value={this.state.dog} onChange={this.sendCheckBoxValue}/>DOG</p> 
  </div>
   )
  } 

})

ReactDOM.render(<SL/>, document.getElementById("root"));

Answer 1

首先需要为输入复选框提供checked而不是value。

第二件事，你不需要使用refs，因为你可以从event.target.checked中获取复选框选中的值。

这是代码

var SL = React.createClass({

  getInitialState: function() {
     return {
       cat: '',
       dog: ''
     } 
  },


 sendCheckBoxValue: function(event,type){
   let state = {}
   if(type === 'cat') state.cat = event.target.checked
   if(type === 'dog') state.dog = event.target.checked
   this.setState(state)
  },


 render: function () {
   return (
    <div>
    <p>
      <input 
        type="checkbox" 
        checked={this.state.cat} 
        onChange={ function(event){ 
           return this.sendCheckBoxValue(event,'cat') 
        }.bind(this) }
      />
      CAT
   </p> 
    <p>
      <input 
        type="checkbox" 
        checked={this.state.dog} 
        onChange={ function(event){ 
           return this.sendCheckBoxValue(event,'dog') 
        }.bind(this) }
      />
      DOG
   </p> 
  </div>
   )
  } 

})

ReactDOM.render(<SL/>, document.getElementById("root"));

Answer 2

尝试使用checked属性而不是value。另外，在ref属性中使用不同的值：

var SL = React.createClass({

  getInitialState: function() {
     return {
       cat: false,
       dog: false
     } 
  },


 sendCheckBoxValue: function(e){
   this.setState({
     cat: this.refs.textInput1.checked,
     dog: this.refs.textInput2.checked
   })
  },


 render: function () {
   return (
    <div>
    <p><input type="checkbox" ref="textInput1" value={this.state.cat} onChange={this.sendCheckBoxValue}/>CAT</p> 
    <p><input type="checkbox" ref="textInput2" value={this.state.dog} onChange={this.sendCheckBoxValue}/>DOG</p> 
  </div>
   )
  } 

})

ReactDOM.render(<SL/>, document.getElementById("root"));

无法在事件更改时发送ref值

2 个答案: