[每当我尝试启动该应用程序时,我都无法在输入字段中编写任何内容。也许是因为react正在重新渲染某些组件,因为我每次点击都会调用setState。
父App.js包含具有输入字段的SearchForm。每当在输入字段中输入数据时,我都会调用处理程序来设置状态,以便在按钮上单击可对API进行提取
这是我的app.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;
您需要将searchField状态作为道具传递给Child组件。
在SearchForm组件内部,您的输入需要具有value = {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;
实际上,在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}/>