Отправка функции handleChange в качестве Prop для двух или более компонентов не работает - PullRequest
Новая
       6

Отправка функции handleChange в качестве Prop для двух или более компонентов не работает

0 голосов
/ 31 октября 2018

Я пытаюсь отправить функцию handleChange () в двух компонентах как реквизит , но ввод 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>
);

Затем, наконец, это третий компонент, который получает, который получает ту же функцию 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 отправлен, и я думаю, что он получен.

1 Ответ

0 голосов
/ 31 октября 2018

Изменение 

   value={comment.body}

Для 

  value={props.body}

В компоненте ViewListComments. Причина, по которой это не работает, потому что вы не передаете значение элементу ввода

...