Question

我开始学习React，但是我很难找出这个错误。我有一个父组件天气和一个子组件 WeatherForm 。从父组件我为子组件设置属性。子组件是一个表单，目标是从输入中获取文本，当用户单击提交按钮时，输入文本将传递给父组件的一个函数，该组件显示带有文本的警报。

这是父组件：

const WeatherForm = require('WeatherForm');
const WeatherMessage = require('WeatherMessage');

class Weather extends Component {
constructor(props) {
    super(props);
    this.state = {
        location: ''
    };
    this.handleSearch = this.handleSearch.bind(this);
}
render() {
    return (
        <div>
            <h3>Weather component</h3>
            <WeatherForm onSearch={this.handleSearch} />
            <WeatherMessage />
        </div >
    );
}

handleSearch(value) {
    alert(value);
}


}

这是子组件：

class WeatherForm extends Component {
constructor(props) {
    super(props);
    this.onFormSubmit = this.onFormSubmit.bind(this);
}
render() {
    return (
        <div>
            <form onSubmit={this.onFormSubmit}>
                <input type="text" placeholder="Enter a city name" ref="location" onChange={this.onFormSubmit}/>
                <button>Get weather</button>
            </form>
        </div>
    );
}
onFormSubmit(e) {
    e.preventDefault();
    let location = this.refs.location;

    if (location.value && location.value.length > 0) {
        this.refs.location.value = '';
        props.onSearch(location.value);
    }

}
}

但是当我点击提交按钮时，我收到此错误：

props.onSearch不是函数

我在哪里弄错了？

我也在另一个组件的路径中使用父组件天气，例如<Route exact path="/" component={Weather} />

感谢所有

Answer 1

你缺少函数调用的这个上下文。

将props.onSearch更改为this.props.onSearch

反映在您的处理程序

中

onFormSubmit(e) {
    e.preventDefault();
    const value = this.refs.location.value;

    if (value && value.length > 0) {
        this.refs.location.value = '';
        this.props.onSearch(value);
    }

}

ReactJs：从子组件到父组件的数据

1 个答案: