ReactJSができるだけでSETSTATEが、ReactJS状態

Question

を得ることができない私は正常に親から子コンポーネントに小道具を渡されたが、コールバック関数が呼び出されたときに、私はthis.setState()後

1. 行が実行されていないことに気づきます。
2. this.state.*の値にはまったくアクセスできません。

誰でも助けてくれますか？上記のコードで

class RealTime extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      mode: true, 
      marker_name: '', 
      sensor_id: '' 
     }; 
    } 

    handleInputChange(event) { 
     if(event.target.type === 'checkbox') { 
      alert("checked = " + event.target.checked); 
      this.setState({ 
       mode: event.target.checked 
      }); 
      alert("yy"); 
     } 
     else if(event.target.type === 'text') { 
      alert("event.target.name = " + event.target.name + " value = " + event.target.value); 
      this.setState({ 
       [event.target.name]: event.target.value 
      }); 
     } 
     else { 
      alert("Unknown input type = " + event.target.type); 
     } 

     alert("xx"); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 
     alert('handleSubmit'); 
     alert("submitted marker_name=" + this.state.mode); 
    } 

    render() { 
     return (
      <div className="animated fadeIn"> 
      <Row> 
       <Col xs="12"> 
       <Card> 
        <CardHeader> 
         Real Time Number of Customers in Shops 
        </CardHeader> 
        <CardBlock className="card-body"> 
         <MarkerForm mode={this.state.mode} marker_name={this.state.marker_name} sensor_id={this.state.sensor_id} 
           handleInputChange={this.handleInputChange} handleSubmit={this.handleSubmit}/> 
         <ConsoleEvent/> 
         <Canvas/> 
        </CardBlock> 
       </Card> 
       </Col> 
      </Row> 
      </div> 
     ) 
    } 
} 

class MarkerForm extends Component { 
    render() { 
     return (
      <Form inline onSubmit={this.props.handleSubmit}> 
       <FormGroup> 
        <Label className="switch switch-text switch-success switch-lg"> 
        <Input type="checkbox" className="switch-input" checked={this.props.mode} onChange={this.props.handleInputChange}/> 
        <span className="switch-label" data-on="On" data-off="Off"></span> 
        <span className="switch-handle"></span> 
        </Label> 
       </FormGroup> 
       <FormGroup> 
        <Input type="text" placeholder="Marker Name" name="marker_name" value={this.props.marker_name} onChange={this.props.handleInputChange} required/> 
       </FormGroup> 
       <FormGroup> 
        <Input type="text" placeholder="Sensor ID" name="sensor_id" value={this.props.sensor_id} onChange={this.props.handleInputChange} required/> 
       </FormGroup> 
       <FormGroup className="form-actions"> 
        <Button type="submit" color="primary" id="add-marker"><i className="fa fa-plus-square"></i> Add Marker</Button> 
        <Button type="button" color="danger" id="remove-marker"><i className="fa fa-minus-square"></i> Remove Marker</Button> 
       </FormGroup> 
      </Form> 
     ) 
    } 
    } 

、

alert("yy")は実行されませんさん。どちらもalert("xx")です。これはhandleInputにあります。

そしてhandleSubmit()に、私は唯一の警告ボックス「handleSubmit」は見ることができない「submitted marker_name=」

Answer 1

あなたはbindの機能を持つべきです。 thisが結合することなく別のコンテキストを持っているので、それはです：

constructor() { 
    super(); 
    this.state = { 
     mode: true, 
     marker_name: '', 
     sensor_id: '' 
    }; 

    this.handleSubmit = this.handleSubmit.bind(this) 
} 

Answer 2

はこれを試してください：あなたのコンポーネントに機能的に結合する

handleInputChange = (event) => { 
     if(event.target.type === 'checkbox') { 
      alert("checked = " + event.target.checked); 
      this.setState({ 
       mode: event.target.checked 
      }); 
      alert("yy"); 
     } 
     else if(event.target.type === 'text') { 
      alert("event.target.name = " + event.target.name + " value = " + event.target.value); 
      this.setState({ 
       [event.target.name]: event.target.value 
      }); 
     } 
     else { 
      alert("Unknown input type = " + event.target.type); 
     } 

     alert("xx"); 
    } 

使用arrow機能を、コンテキストを失うありませんthis。それらの詳細については、https://medium.com/@machnicki/handle-events-in-react-with-arrow-functions-ede88184bbbをご覧ください。必要に応じて、他の答えと同様に、コンストラクタで関数をバインドできます。しかし、後でいくつかの機能がある場合は、使用するのがよりスムーズかつクリーンであることがわかりますarrow機能

Answer 3

問題がこのは、あなたがコンポーネントに渡し異なるコンテキストを持っていることです。

class RealTime extends Component { 
    constructor() { 
     super(); 
     this.state = { 
      mode: true, 
      marker_name: '', 
      sensor_id: '' 
     }; 

    this.handleInputChange = this.handleInputChange.bind(this); 
    // same for other functions 
} 

Answer 4

はあなたがthisを使用できるようにcustructorインサイドハンドル機能を初期化する必要があります：あなたは、コンストラクタであなたの関数にこのをバインドする必要が バインドのためにこれを試してみてください。

constructor(props){ 
this.state = { 
     mode: true, 
     marker_name: '', 
     sensor_id: '' 
}; 
this.handleInputChange = (event) => { 
    if(event.target.type === 'checkbox') { 
     alert("checked = " + event.target.checked); 
     this.setState({ 
      mode: event.target.checked 
     }); 
     alert("yy"); 
    } 
    else if(event.target.type === 'text') { 
     alert("event.target.name = " + event.target.name + " value = " + event.target.value); 
     this.setState({ 
      [event.target.name]: event.target.value 
     }); 
    } 
    else { 
     alert("Unknown input type = " + event.target.type); 
    } 

    alert("xx"); 
}; 

this.handleSubmit = (event) => { 
    event.preventDefault(); 
    alert('handleSubmit'); 
    alert("submitted marker_name=" + this.state.mode); 
}; 
}