Question

我有一个textarea用户输入位置。然后，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

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

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

},

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

来自the documentation:

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。

你能做的就是这样：

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

当然会修改callthebase以获取新值。

P.S。避免将this分配给变量以便能够在函数内使用它，您可以使用arrow functions from ES6代替：）

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

Answer 2

如何为textarea添加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} />

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});
},

让ReactJS立即根据textarea改变价值？

3 个答案: