我该如何使用函数将参数传递给在反应中作为道具接收的函数？

Question

import React, {Component} from 'react';
export default class InputBlock extends Component{
handleChange = (e, props) =>{                //Checked passing props didn't worked.
    const inputVal = this.msgInput.value;
    props.onMessageSent(inputVal);
    e.preventDefault();
}

render(){
    return (
        <div>
            <form onSubmit={this.handleSubmit} >
                <input type="text" className="msgInput" ref = {input => this.msgInput = input}/>
                <input type="submit" value = "submit" className="sendButton" />
            </form>
        </div>
    )
}

}

在这里，我从父组件接收函数onMessageSent作为道具。 我想将输入值传递给函数，以便可以将该值设置为state并将其作为道具传递给其他组件。 这是我的父组件：

import React, {Component} from 'react';

import Messages from './Messages';
import InputBlock from './InputBlock';

export default class MainInterface extends Component {
    constructor(props){
        super(props);
        this.state = {
            sent: [],
            received: []
        }
    }   

    onMessageSent = (val) =>{
        this.setState(prevState => ({
          sent: [...prevState.sent, val]
        }))
    }

    render(){
        return (
            <div>
                <Messages sent={this.state.sent} received={this.state.received}/>
                <InputBlock onChange = {this.onMessageSent} />
            </div>
        )
    }
}

**注意：**有一种类型，应该是onMessageSent而不是onMessagesent。 很抱歉浪费您的时间。

Answer 1

您的组件被定义为ES6类，在这种情况下，您可以将组件的props称为this.props而无需将它们作为参数传递给类方法。 因此，您的方法应如下所示：

handleChange(e) {
    const inputVal = this.msgInput.value;
    this.props.onChange(inputVal);
    e.preventDefault();
}

Answer 2

 import React, {Component} from 'react';
export default class InputBlock extends Component{
handleChange = (e) =>{                //Checked passing props didn't worked.
    const inputVal = this.msgInput.value;
    this.props.onMessageSent(inputVal);
    e.preventDefault();
}

render(){
    return (
        <div>
            <form onSubmit={this.handleSubmit} >
                <input type="text" className="msgInput" ref = {input => this.msgInput = input}/>
                <input type="submit" value = "submit" className="sendButton" />
            </form>
        </div>
    )
}

import React, {Component} from 'react';

import Messages from './Messages';
import InputBlock from './InputBlock';

export default class MainInterface extends Component {
    constructor(props){
        super(props);
        this.state = {
            sent: [],
            received: []
        }
        this.onMessageSent= this.onMessageSent.bind(this)
    }   

    onMessagesent = (val) =>{
        this.setState(prevState => ({
          sent: [...prevState.sent, val]
        }))
    }

    render(){
        return (
            <div>
                <Messages sent={this.state.sent} received={this.state.received}/>
                <InputBlock onChange = {this.onMessageSent)} />
            </div>
        )
    }
}