代码之家 › 专栏 › 技术社区 › Lutaaya Huzaifah Idris

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

react-props materialize reactjs

Lutaaya Huzaifah Idris · 技术社区 · 6 年前

我想发一封信 handleChange() 道具 handleChange()

这就是 查看所有评论 发送 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>

        );
    }
}

手柄更换 作为道具发挥作用,正如你在 查看注释

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已经发送并且我认为它已经收到了。