将 handleChange 函数作为 Prop 发送到 2 个或更多组件不起作用

Question

我正在尝试在两个组件中发送一个 handleChange() 函数作为 props，但是 Materialize 输入不允许输入，这意味着 handleChange() 未通过。

可能遗漏了什么，因为我看到所有流程都是正确的。以下是我的组件及其流程。

这是 ViewAllComments 组件，它发送 handleChange 作为道具

class ViewAllComments extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            body: ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (e) => {
        this.setState({body: e.target.value});
    };


    render() {

        const  { comments }  = this.props.article;

        return (
            <div>
                <ViewListComments
                    comments={comments}
                    handleChange={this.handleChange}
                    clearHandler={this.clearHandler}
                    deleteComment={this.deleteComment}
                    modalCallEdit={this.modalCallEdit}
                    editComment={this.editComment}
                    body={this.state.body}
                />
            </div>

        );
    }
}

然后，这是接收 handleChange 函数作为道具的第二个功能组件，如您在 ViewComments 组件中所见：

const ViewListComments = props => (

                    <div>
                        <Modal
                            id='foo'
                            actions=""
                            className={styles['align-edit-modal']}
                            header=''>
                            <ViewComments
                                handleSubmit={props.modalCallEdit}
                                value={comment.body}
                                handleChange={props.handleChange}
                                buttonsStyles={`row  right ${styles['edit-buttons-styles']}`}
                                labelComment={'Edit Comment'}
                                buttonText={'Edit'}
                                cancelText={'Cancel'}
                                handleCancel={props.clearHandler}
                            />
                        </Modal>
                    </div>
);

然后，最后这是接收的第三个组件，它接收与 prop 相同的 handleChange 函数，正如您在输入 onChange 属性.

中看到的那样

const ViewComments = props => (
    <div>
        <div className='row'>
            <div className="input-field col s6 l9">
                <input id="body" type="text" name='body' onChange={props.handleChange} value={props.value} className="validate" >
                </input>
                <label className='active' htmlFor="comments">{props.labelComment}</label>
                <div className={styles['error-text-comment']}>{props.commentError}</div>
            </div>
        </div>
    </div>
);
};

有了所有这些流程，我希望我的 Materialize 输入允许我开始输入，因为 handleChange 已发送并且我认为它已收到。

Answer 1

改变

   value={comment.body}

至

  value={props.body}

在 ViewListComments 组件中。它不起作用的原因是您没有将值传递给输入元素

将 handleChange 函数作为 Prop 发送到 2 个或更多组件不起作用

Sending handleChange function as a Prop to 2 or more components doesn't work

materialize

reactjs

react-props