Javascript 让ReactJS基于textarea立即更改值？_Javascript_Reactjs

Javascript 让ReactJS基于textarea立即更改值？

javascript reactjs

Javascript 让ReactJS基于textarea立即更改值？,javascript,reactjs,Javascript,Reactjs,我有一个文本区，用户在其中输入位置。然后，onBlur设置天气值，结果应该根据用户键入的内容进行更改。代码正常工作。但是，只有在用户发射两次的情况下 var Duck = React.createClass({ getInitialState:function() { return { deesfault: 'Houston, Texas', setting: true, main: '', } }, componentDidMo

我有一个文本区，用户在其中输入位置。然后，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>
    )
  }
});

var Duck=React.createClass({
getInitialState:函数（）{
返回{
deesfault：“德克萨斯州休斯顿”，
背景：对，
主要内容：“，
}
},
componentDidMount:function（）{
返回此参数。callthebase（）；
},
callthebase:function（）{
var=这个；
$.get（'http://api.openweathermap.org/data/2.5/weather?q=“+this.state.deesfault+”&units=imperial&appid=~~appid~~”，函数（数据）{
self.setState（数据）；
});
},
changeit:function（）{
this.setState（{setting:false}）；
},
设置：函数（）{
这个函数名为.callthebase（）；
this.setState（{deesfault:document.getElementById（'section'）.value}）；
this.setState（{setting:true}）；
},
changesection:函数（）{
if（this.state.setting）{
在{this.state.deesfault}
）中返回（）
else{return（）}
},
render:function（）{
返回(
{this.changesection（）}
天气是{this.state.main.temp}
)
}
});

照现在的情况，我必须输入一个位置，模糊掉它，然后回来，激活它，然后再模糊掉它，代码才能真正完成我想要的。当我使用纯伪文本时，这似乎不是问题。但是当我调用API时，这个问题就出现了

为您的文本区域添加

onChange

属性怎么样：

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

   // process value and update state here
},

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

\u onChange:函数（事件）{
var值=event.target.value；
//在此处处理值和更新状态
},

为您的文本区域添加

onChange

属性怎么样：

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

   // process value and update state here
},

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

\u onChange:函数（事件）{
var值=event.target.value；
//在此处处理值和更新状态
},

您正在调用callthebase，然后将deesfault设置为新值

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

},

在调用callthebase之前更改它不会解决您的问题，因为setState是异步调用的：

从

setState（）不会立即改变this.state，但会创建等待状态转换。调用此命令后访问this.state 方法可能返回现有值

你可以这样做：

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

当然，还要修改callthebase以接受新值

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

},

注意：避免将此赋值给变量，以便在函数中使用它，您可以改为使用：）