为什么我的 onChange 事件在 React 中不起作用？答案

【问题标题】：Why is my onChange event not working in React?为什么我的 onChange 事件在 React 中不起作用？
【发布时间】：2020-01-01 03:39:12
【问题描述】：

我正在为一个最终会变得更大的应用程序编写一个简单的搜索输入组件，但我不知道为什么没有调用与之关联的 onChange 道具。在这里，我将展示我的搜索输入组件和我导入它的应用程序组件：

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);
    }
}

然后这是我的主要应用程序组件（仍然非常简单，请记住我有列表呈现功能，但这不是我的问题所在）。我很确定问题出在我编写并添加到 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;
  }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你有一个错字！ handleChange 中缺少“l” :)

handleChange = (e) => {
        const { onChange } = this.props;

        onChange(e);
    }

【讨论】：

【解决方案2】：

我在沙盒中运行您的代码： https://codesandbox.io/s/onchange-problem-37c4i

据我所知，您的功能没有问题。

但在这种情况下，如果 onChange 对您不起作用，是因为您可能在 < SearchInput /> 组件内部没有将值传递给父元素。

检查沙盒并注意 SearchInput1 和 SearchInput2

【讨论】：