Javascript 输入返回的onChange事件'；无法读取未定义的'；

我有两个React组件，一个父组件和一个子组件。它们都位于单独的文件中，代码如下所示：

import React, { Component } from 'react';
import SearchBar from './SearchBar';
import axios from "axios/index";

var processedQuery;
var url = 'https://some-url-api.com/q=';

class MainContent extends Component {
    state = {
        results: '',
        query: ''
    }

    getData = () => {
        axios.get(url + processedQuery)
            .then(({ data }) => {
                this.setState({
                    results: data
                })
            })
    }

    handleInputChange = () => {
        processedQuery = this.search.value.split(' ').join('+');
        this.setState({
                query: processedQuery
            }, () => {
                this.getData();
            }
        )
    }

    render() {
        return (
            <div className="main-content">
                <SearchBar handleInputChange={this.handleInputChange} />
            </div>
        );
    }
}

export default MainContent;

import React，{Component}来自'React'；
从“./SearchBar”导入搜索栏；
从“axios/index”导入axios；
var-processedQuery；
var url='1〕https://some-url-api.com/q=';
类MainContent扩展组件{
状态={
结果：“”，
查询：“”
}
getData=（）=>{
get（url+processedQuery）
。然后（{data}）=>{
这是我的国家({
结果：数据
})
})
}
handleInputChange=（）=>{
processedQuery=this.search.value.split（“”）.join（‘+’）；
这是我的国家({
查询：processedQuery
}, () => {
这是getData（）；
}
)
}
render（）{
返回(
);
}
}
导出默认主内容；

以及子组件：

import React, { Component } from 'react';

class SearchBar extends Component {
    render() {
        return (
            <div className="main-content__search-bar">
                <form>
                    <input
                        type="text"
                        placeholder="Search for..."
                        onChange={this.props.handleInputChange}
                    />
                </form>
            </div>
        );
    }
}

export default SearchBar;

import React，{Component}来自'React'；
类搜索栏扩展组件{
render（）{
返回(
);
}
}
导出默认搜索栏；

当

getData

和

handleInputChange

函数位于子组件内部时，一切正常。但是，当我将它们移动到父组件并尝试在输入中键入某些内容时，出现以下错误：

未捕获类型错误：无法读取未定义的属性“值”

---

我把代码检查了好几次，都没能找到我缺少的东西。有什么帮助吗？

您的父组件应将新值作为参数：

handleInputChange = (event) => {
    processedQuery = event.target.value.split(' ').join('+');
    // ...
}

我认为孩子实际上应该传递值（而不是事件）

家长可以做：

handleInputChange = (searchTerm) => {
    processedQuery = searchTerm.split(' ').join('+');
    // ...
}

---

父组件应将新值作为参数：

handleInputChange = (event) => {
    processedQuery = event.target.value.split(' ').join('+');
    // ...
}

我认为孩子实际上应该传递值（而不是事件）

家长可以做：

handleInputChange = (searchTerm) => {
    processedQuery = searchTerm.split(' ').join('+');
    // ...
}

---

看起来你不是在调用onChange函数。看起来你不是在调用onChange函数。谢谢你的努力，弗兰克，但不幸的是，问题仍然存在……是否有任何信息传递到

handleInputChange

？我在

handleInputChange

的开头做了一个

console.log（searchTerm）

，但是我在开发工具中没有得到任何记录。似乎没有传递任何内容。此外，我删除了

handleInputChange

中的所有内容，只留下了

控制台.log

。还是没什么……也许你可以试着在StackBlitz之类的网站上重现这个问题。我似乎什么都看不出来。谢谢你的努力，弗兰克，但不幸的是问题仍然存在……有什么东西传递到

handleInputChange

？我在

handleInputChange

的开头做了

console.log（searchTerm）

，但我在开发工具中没有得到任何记录。似乎没有传递任何内容。此外，我删除了

handleInputChange

中的所有内容，只留下了

控制台.log

。还是没什么……也许你可以试着在StackBlitz之类的网站上重现这个问题。我好像什么也看不见。