import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: null,
    }


  handleSubmit = event=> {
    event.preventDefault();

    var input = document.getElementById("userText").value;
    this.setState({ userInput: input });
    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;
        this.setState({ result: result });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}

export default App;

this.setState()是一个异步函数，这意味着更新后的数据只能在其回调中使用。

为了更好地展示这一点，请尝试使用此修改：

 handleSubmit = event=> {
    event.preventDefault();

    var input = document.getElementById("userText").value;

    axios.get('http://localhost:4000/search?query=' + input)
      .then(res => {
        var result = res.data;
        this.setState({ result: result, userInput: input }, () => {
          console.log(this.state.result);
          console.log(this.state.userInput);       
        });
      })
  }

注意：您将“userText”字段作为不受控制的字段处理。这意味着你让它由本机html + js填充，然后从DOM中获取内容。这样做，你永远不需要一个“userInput”状态变量。

以下是userText作为受控领域的片段：

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: '',
    }

  handleChange = event=> {
    event.preventDefault();
    this.setState({userInput: event.target.value});
  }

  handleSubmit = event=> {
    event.preventDefault();

    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;
        this.setState({ result: result });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" value={this.state.userInput} onChange={this.handleChange} placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}

如何只需单击一次搜索按钮而不是两次，即可检索搜索结果？

我正在开发Node.js + ElasticSearch + React.js项目，我设法让搜索工作！但是，在我在控制台中取回结果之前，我必须先单击搜索按钮两次。最后，我想通过组件将结果输出给用户。任何输入都会很棒！

这是React.js：

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: null,
    }


  handleSubmit = event=> {
    event.preventDefault();

    var input = document.getElementById("userText").value;
    this.setState({ userInput: input });
    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;
        this.setState({ result: result });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}

export default App;

 handleSubmit = event=> {
    event.preventDefault();

    var input = document.getElementById("userText").value;

    axios.get('http://localhost:4000/search?query=' + input)
      .then(res => {
        var result = res.data;
        this.setState({ result: result, userInput: input }, () => {
          console.log(this.state.result);
          console.log(this.state.userInput);       
        });
      })
  }

class App extends Component {

    state = {
      result: [],
      name: 'Roger',
      userInput: '',
    }

  handleChange = event=> {
    event.preventDefault();
    this.setState({userInput: event.target.value});
  }

  handleSubmit = event=> {
    event.preventDefault();

    axios.get('http://localhost:4000/search?query=' + this.state.userInput)
      .then(res => {
        var result = res.data;
        this.setState({ result: result });
        console.log(this.state.result);
        console.log(this.state.userInput);
      })

  }

  render() {
    return (
      <div className="App">
        <h2>hello from react</h2>
          <form action="/search">
            <input type="text" value={this.state.userInput} onChange={this.handleChange} placeholder="Search..." name="query" id="userText"/>
            <button type="submit" onClick={this.handleSubmit}><i>Search</i></button>
          </form>
      </div>
    );
  }
}