ReactJS를 사용하여 텍스트 영역을 기반으로 즉시 값을 변경 하시겠습니까?

Question

사용자가 위치를 입력하는 텍스트 영역이 있습니다. 그런 다음 onBlur에서 날씨의 값이 설정되고 사용자가 입력 한 값에 따라 결과가 변경됩니다. 코드가 정상적으로 작동합니다. 그러나 사용자가 두 번 발사 할 때만 가능합니다.

var Duck = React.createClass({ 
    getInitialState:function() { 
    return { 
     deesfault: 'Houston, Texas', 
     setting: true, 
     main: '', 
    } 
    }, 

    componentDidMount:function() { 
    return this.callthebase(); 
    }, 

    callthebase: function() { 
    var selfish = this; 
    $.get('http://api.openweathermap.org/data/2.5/weather?q='+this.state.deesfault+"&units=imperial&appid=~~appid~~", function(data){ 
    selfish.setState(data); 
    }); 
    }, 

    changeit: function() { 
    this.setState({setting: false}); 
    }, 

    setsetting: function() { 
    this.callthebase(); 
    this.setState({deesfault: document.getElementById('section').value}); 
    this.setState({setting: true}); 
    }, 

    changesection: function() { 
    if (this.state.setting) { 
     return (<p onClick={this.changeit}>In {this.state.deesfault}</p>)} 

    else { return (<textarea id="section" defaultValue={this.state.deesfault} onBlur={this.setsetting} />) } 
    }, 

    render: function() { 
    return (
     <div> 
     {this.changesection()} 
     <p>The weather is {this.state.main.temp}</p> 
     </div> 
    ) 
    } 
}); 

은 그대로, 나는 위치를 입력 그것의 흐리게 한 다음 활성화에 돌아와 다음 실제로 내가하고 싶은 일을하기 위해 코드를 다시 흐리게 할 것이다. 이것은 일반 더미 텍스트를 사용할 때 문제가되지 않는 것으로 보입니다. 그러나 API 호출을 만들 때이 문제가 발생합니다.

Answer 1

후, 새로운 값으로 deesfault 설정. setState를 비동기 호출하기 때문에 비록 callthebase 문제가 해결되지 않습니다 호출하기 전에 변경

setsetting: function(){ 
    this.callthebase(); 
    this.setState({deesfault: document.getElementById('section').value}); 
    this.setState({setting: true}); 

}, 

:

와 setState (

the documentation:에서 즉시 this.state 돌연변이하지 않습니다)는 그러나 생성 보류 중 상태 전이. 이 메서드를 호출 한 후 this.state에 액세스하면 잠재적으로 기존 값을 반환 할 수 있습니다.

setsetting: function(){ 
     var newValue = document.getElementById('section').value; 
     this.callthebase(newValue); 
     this.setState({deesfault: newValue, setting: true}); 
    }, 

물론 수정 callthebase 새로운 값에 걸릴 : 당신이 무엇을 할 수 있는지

이 같은 것입니다.

P. 함수 내에서 사용할 수 있도록 변수에 this을 할당하지 않도록, 당신은 유 두 setState를 같이 하나의 호출을 병합 할 수 대신 :

callthebase: function(newValue){ 
    $.get('http://api.openweathermap.org/data/2.5/weather? q='+newValue+"&units=imperial&appid=~~appid~~", (data) => { 
     this.setState(data); 
    }); 
}, 

Answer 2

무엇 당신의 텍스트 영역에 대한 onChange 속성을 추가하는 방법에 대한 : 당신은 callthebase를 호출

_onChange: function(event) { 
    var value = event.target.value; 

    // process value and update state here 
}, 

<textarea id="section" defaultValue={this.state.deesfault} onChange={this._onChange} /> 

Answer 3

아래의 변경

componentDidMount:function() { 
let data = this.callthebase(this.state.deesfault); 
this.setState(data)}, 

callthebase: function(newValue){ 
return $.get('http://api.openweathermap.org/data/2.5/weather? q='+newValue+"&units=imperial&appid=~~appid~~", (data) => data);}, 

setsetting: function(){ 
    let oldValue = document.getElementById('section').value; 
    let newValue = this.callthebase(oldValue); 
    this.setState({deesfault: newValue, setting: true}); 
},