Не удается записать в поле ввода в приложении React

Question

Всякий раз, когда я пытаюсь запустить приложение, я не могу ничего написать в поле ввода. Может быть, потому что реагирует на рендеринг некоторых компонентов, потому что я вызываю setState при каждом нажатии.

Родительское приложение. js содержит SearchForm, который имеет поле ввода. Всякий раз, когда данные вводятся в поле ввода, я вызываю обработчик, чтобы установить состояние, чтобы при нажатии кнопки можно было получить выборку для API

. Здесь находится файл моего приложения. js.

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';
import NavigationBar from './components/NavigationBar/NavigationBar.js';
import Logo from './components/Logo/Logo.js';
import SearchForm from './components/SearchForm/SearchForm.js';
import SearchFilter from './components/SearchFilter/SearchFilter.js';
import ReviewComponent from './components/ReviewComponent/ReviewComponent.js';


class App extends React.Component {
  constructor(){
    super();
    this.state = {
      searchfield: '', 
      searchresults: {}
    }
    this.onInputChange = this.onInputChange.bind(this);
    this.onSearchClick = this.onSearchClick.bind(this);
  }

  onInputChange = (event) => {
    this.setState({searchfield: event.target.value});
  }

  onSearchClick = () => {
    fetch('https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=&inputtype=textquery&type=restaurant&input=kfc&fields=name,place_id,formatted_address')
      .then(response=> response.json())
      .then(results => {this.setState({ searchresults: results})})
      .then(results => {console.log("lulli" + JSON.stringify(this.state.searchresults))});
  }

  render(){
    return (
      <div className="App">
        <BrowserRouter> {/* using react-router-dom for routing */}
          <NavigationBar />  {/* for navigation through the app, always rendered */}
          <Logo />   {/* a logo for the RestrauntReviewsTool */}
          <Switch>
            <Route path='/' 
              exact 
              component={() => <SearchForm onInputChange={this.onInputChange} onSearchClick={this.onSearchClick} /> } 
            />  
            <Route 
              path='/searchfilter' 
              component={() => <SearchFilter searchresults={this.searchresults} /> } 
            />  

            <ReviewComponent path='/reviewcomponent' component={ReviewComponent} /> {/* final restaurant details */}
          </Switch>
        </BrowserRouter>

      </div>
    );
  }
}


export default App;

вот мой SearchForm. js

import React from 'react';
import {Link} from 'react-router-dom';

const SearchForm = ({ onInputChange, onSearchClick }) => {
    return(
        <div>
            <p className='f3'>
                {'Search here for restaurants, maybe make an api fetch here and populate data in the SearchFilter component'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                    <input className='f4 pa2 w-70 center' type='text' onChange={onInputChange}/>
                    <button className='w-30 grow f4 ph3 pv2 dib white bg-light-purple' onClick={onSearchClick}>
                    <Link to ='/searchfilter'>
                    Search   
                    </Link>    
                    </button>

                </div>
            </div>
        </div>
    );
}

export default SearchForm;

Answer 1

На самом деле, в ReactJS разработчик, кроме того, управляющие изменения на input должны также контролировать значение input:

handleInputChangeValue = e =>
  this.setState({
    inputValue: e.target.value
  });

~~~

<input
  type="text"
  value={this.state.inputValue}
  onChange={this.handleInputChangeValue}
/>

Но в своем коде вы только что обработали изменение и не передавайте новое значение тегу input:

<input className='f4 pa2 w-70 center' type='text' onChange={onInputChange}/>

Answer 2

вам нужно передать состояние searchField дочернему компоненту в качестве реквизита.

А внутри компонента SearchForm ваш вход должен иметь значение = {searchField}

, поэтому дочерний компонент будет перерисован заново когда ваше состояние searchField изменилось.

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      searchfield: '', 
      searchresults: {}
    }
    this.onInputChange = this.onInputChange.bind(this);
    this.onSearchClick = this.onSearchClick.bind(this);
  }

  onInputChange = (event) => {
    this.setState({searchfield: event.target.value});
  }

  onSearchClick = () => {
    fetch('https://maps.googleapis.com/maps/api/place/findplacefromtext/json?key=&inputtype=textquery&type=restaurant&input=kfc&fields=name,place_id,formatted_address')
      .then(response=> response.json())
      .then(results => {this.setState({ searchresults: results})})
      .then(results => {console.log("lulli" + JSON.stringify(this.state.searchresults))});
  }

  render(){
    return (
      <div className="App">
        <BrowserRouter> {/* using react-router-dom for routing */}
          <NavigationBar />  {/* for navigation through the app, always rendered */}
          <Logo />   {/* a logo for the RestrauntReviewsTool */}
          <Switch>
            <Route path='/' 
              exact 
              component={() => <SearchForm searchfield={this.state.searchfield} onInputChange={this.onInputChange} onSearchClick={this.onSearchClick} /> } 
            />  
            <Route 
              path='/searchfilter' 
              component={() => <SearchFilter searchresults={this.searchresults} /> } 
            />  

            <ReviewComponent path='/reviewcomponent' component={ReviewComponent} /> {/* final restaurant details */}
          </Switch>
        </BrowserRouter>

      </div>
    );
  }
}


export default App;

import React from 'react';
import {Link} from 'react-router-dom';

const SearchForm = ({ searchField, onInputChange, onSearchClick }) => {
    return(
        <div>
            <p className='f3'>
                {'Search here for restaurants, maybe make an api fetch here and populate data in the SearchFilter component'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                    <input className='f4 pa2 w-70 center' type='text' value={searchField} onChange={onInputChange}/>
                    <button className='w-30 grow f4 ph3 pv2 dib white bg-light-purple' onClick={onSearchClick}>
                    <Link to ='/searchfilter'>
                    Search   
                    </Link>    
                    </button>

                </div>
            </div>
        </div>
    );
}

export default SearchForm;