[英]Why is my onChange event not working in React?
I am coding a simple search input component for an app that will eventually become larger, but I am at a loss for why the onChange prop associated with it isn't being called.我正在为最终会变得更大的应用程序编写一个简单的搜索输入组件,但我不知道为什么没有调用与其关联的 onChange 道具。 Here I will show my search input component and the app component into which I import it:在这里,我将展示我的搜索输入组件和我将其导入的应用程序组件:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class SearchInput extends Component {
static defaultProps = {
onChange: () => Promise.resolve(),
}
static propTypes = {
onChange: PropTypes.func,
value: PropTypes.string,
}
render() {
const { value } = this.props;
return (
<input className="search-input" type='text' onChange={this.handleChange} value={value}/>
)
}
handeChange = (e) => {
const { onChange } = this.props;
onChange(e);
}
}
And then here's my main app component (very simple still, and keep in mind that I have list-rendering functionality, but that isn't where my issue lies).然后这是我的主要应用程序组件(仍然非常简单,请记住我有列表呈现功能,但这不是我的问题所在)。 I'm pretty sure the issue lies somewhere in the handleSearchDidChange method that I wrote up and tacked onto the onChange prop for the SearchInput component:我很确定问题出在我编写并附加到 SearchInput 组件的 onChange 道具的 handleSearchDidChange 方法中的某处:
import React, { Component } from 'react';
import Container from './components/container'
import List from './components/list'
import SearchInput from './components/search-input';
// Styles
import './App.css';
export default class App extends Component {
constructor(props){
super(props)
this.state = {
searchValue: undefined,
isSearching: false,
}
// this.handleSearchDidChange = this.handleSearchDidChange.bind(this);
}
render() {
// in the main render, we render the container component (yet to be styled)
// and then call renderList inside of it. We need "this" because this is
// a class-based component, and we need to tell the component that we are
// using the method associated with this class
return (
<div className="App">
<Container>
{this.renderSearchInput()}
{this.renderList()}
</Container>
</div>
);
}
renderSearchInput = () => {
const { searchValue } = this.state;
return (<SearchInput onChange={this.handleSearchDidChange} value={searchValue}/>)
}
renderList = () => {
// return the list component, passing in the fetchData method call as the data prop
// since this prop type is an array and data is an array-type prop, this is
// acceptable
return <List data={this.fetchData()}/>
}
// possibly something wrong with this method?
handleSearchDidChange = (e) => {
const { target } = e;
const { value } = target;
this.setState({
searchValue: value,
isSearching: true,
});
console.log('value: ', value);
console.log('searchValue: ', this.state.searchValue);
console.log('-------------------------')
}
fetchData = () => {
// initialize a list of items
// still wondering why we cannot put the listItems constant and the
// return statement inside of a self-closing setTimeout function in
// order to simulate an API call
const listItems = [
{title: 'Make a transfer'},
{title: 'Wire money'},
{title: 'Set a travel notice'},
{title: 'Pop money'},
{title: 'Edit travel notice'},
{title: 'test money things'},
{title: 'more test money things'},
{title: 'bananas'},
{title: 'apples to eat'},
{title: 'I like CocaCola'},
{title: 'Christmas cookies'},
{title: 'Santa Claus'},
{title: 'iPhones'},
{title: 'Technology is amazing'},
{title: 'Technology'},
{title: 'React is the best'},
];
// return it
return listItems;
}
You have a typo!你打错了! Missing the "l" in handleChange
:)缺少handleChange
的“l” :)
handleChange = (e) => {
const { onChange } = this.props;
onChange(e);
}
i run your code in sandBox: https://codesandbox.io/s/onchange-problem-37c4i我在沙箱中运行你的代码: https ://codesandbox.io/s/onchange-problem-37c4i
there is no issue with your functionality as far as i can see.据我所知,您的功能没有问题。
but in this case if onChange
dose not work for you is because maybe inside of < SearchInput />
component you don't pass the value up to the parent element.但在这种情况下,如果onChange
对您不起作用是因为可能在< SearchInput />
组件内部您没有将值传递给父元素。
check the sandBox and notice to the SearchInput1 and SearchInput2检查沙箱并注意 SearchInput1 和 SearchInput2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.