function Search(props)
{
return(
<input type="text" value={ props.value } onChange={ () => props.onChanging() } />
)
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: "",
loading: true,
hits: null,
}
this.onDismiss = this.onDismiss.bind(this);
this.onChanging = this.onChanging.bind(this);
}
onChanging(e)
{
console.log(e.currentTarget.value);
console.log(this.state.inputValue);
}
async componentDidMount() {
const url = "https://hn.algolia.com/api/v1/search";
const response = await fetch(url);
const data = await response.json();
this.setState({ hits: data.hits, loading: false });
}
onDismiss(id) {
const isNotId = item => item.objectID !== id;
const updatedHits = this.state.hits.filter(isNotId);
this.setState({ hits: updatedHits});
console.log(this.state.hits);
}
render() {
return (
<div className="container">
{this.state.loading ?
<div>loading...</div> :
<div>hits:<br />
<Search value={this.state.inputValue} onChanging={this.onChanging} />
{this.state.hits.map((item) =>
item.title === null ? '' :
<div key={item.objectID}>
{item.title} - <a target="_blank" href={item.url}> {item.url}</a>
<button onClick={()=>this.onDismiss(item.objectID)}>RESET</button>
</div>
)}
<div className="viewmore">View more story</div>
</div>
}
</div>
)
}
}
export default App;
как получить значение из инпута? в чем проблема