ReactJS сохраняет отправку из ввода для других вызовов API - PullRequest
Новая
       6

ReactJS сохраняет отправку из ввода для других вызовов API

0 голосов
/ 15 мая 2018

Я работаю над веб-приложением 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

1 Ответ

0 голосов
/ 15 мая 2018

Управление полем ввода. 

<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

...