ReactJS 为其他 API 调用保存来自输入的提交

Question

我正在开发 React 网络应用程序，需要保存表单提交的输入，以便在多个 API 调用中重复使用。

我最初可以使用输入进行 API 调用并显示结果，但我无法保存表单中的输入以进行另一个调用。最终目的是让用户能够在输入搜索词后点击按钮以按另一个条件过滤响应。

我已在下方注明了我想在代码中执行但无法正常工作的操作：

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
        data: [],
        inputValue: '',
    };
  }

  onInitialSearch = (e) => {
    e.preventDefault();

    ////this value is what I use in the initial API call which is working
    const { value } = this.input;

    ////this is what I'd like to be able to do but isn't working
    //this logs nothing in console
    this.setState({ inputValue : this.input}), function () {
        console.log("inputValue  is ",this.state.inputValue);
    };

    if (value === '') {
        return;
    }
    this.fetchStories(value);
  }

  fetchStories = (value) => {
    axios.get(getNews(value))
        .then(response => {
            this.setState({data: response.data.articles});
        })
  }

   render() {
     return (
            <div className="page">
                <div className="App-search">
                    <form type="submit" onSubmit={this.onInitialSearch}>
                        <input type="text" ref={node => this.input = node} />
                        <button type="submit">Search</button>
                    </form>
                </div>
                <div>
                    <List list={this.state.data} />
                 </div>
            </div>
    );
}
}

export default Search

Answer 1

控制输入字段。

<input type="text" onChange={(e) => this.setState({inputValue: e.target.value})} value={this.state.inputValue} />

和onInitialSearch 函数可以使用状态中的值，而不使用引用。该值在提交后不会被删除，因此您可以在需要时重新使用它。

有关受控和非受控组件的更多信息，请参阅：https://medium.com/@peter.yun.kim/controlled-and-uncontrolled-input-values-in-react-907119cc98d4

ReactJS 为其他 API 调用保存来自输入的提交

ReactJS save submission from input for other API calls

forms

variable-assignment

node.js

reactjs