Очистить input React/Redux?

Question

[beegrowth]

Добрый день! Подскажите пожалуйста как в react/redux очистить инпут. Сейчас при клике на button добавляется запись и нужно, чтобы очищался инпут. С props-ов очищается, но значение все равно остается в инпуте.
Вот кусок кода

// Компонент Input
   handleChange(event) {
        const {value} = event.target;
        this.props.onChange(value);
        this.setState({value});
    }

    render() {
        return (
                <input
                    type='text'
                    value={this.state.value}
                    onChange={this.handleChange}
                    className='form-control'
                />
    );

// Родительский компонент

  inputOnChange(value) {
        this.setState({todoName: value});
    }

    addTodo() {
        let {todos} = this.props.home;
        const id = todos[todos.length - 1].id + 1;
        const name = this.state.todoName;
        this.props.dispatch(addTodo(id, name));
        this.setState({todoName: ''});
// тут с переменной очищается, а инпут нет
    }

    render() {
        const {todoName} = this.state;
        const {todos, error} = this.props.home;
        return (
            <div className="container-fluid">
                        <div className="col-xs-4">
                            <Input onChange={this.inputOnChange} value={''} error={error}/>
                            <button className="btn btn-primary" onClick={this.addTodo}>Add todo</button>
                        </div>
            </div>

        );
    }

Второй вопрос:
Используете ли вы с redux методы жизненного цикла (componentWillReceiveProps и тд..)
Пересмотрел много туториал нигде не замечал этого.
Заранее благодарю)

Answer 1

[Никита Гущин]

Вы в компоненте Input используете state в качестве значения input'а:

value={this.state.value}

При этом: вы также используете state родительского компонента и очищаете именно его:

addTodo() {
        // ...
        this.setState({todoName: ''});
    }

Т.е. Вам нужно: либо использовать props.value в компоненте инпута, либо (в нем же) реализовать механизм передачи значения из props в state.

Comments

[beegrowth]

Спасибо за отклик. Но не пойму как это реализовать при клике на button.

[Никита Гущин]

beegrowth: а зачем вам использовать state внутри Input? Это оправдано, например, если внутренний state идет в паре с dobounce (оптимизация производительности). В этом случае можно использовать componentWillReceiveProps. Если же state в Input используется "просто так" - то от него можно отказаться и сделать все через props (вы уже храните значение инпута в state родительского компонента).

Answer 2

[Максим]

Используете ли вы с redux методы жизненного цикла (componentWillReceiveProps и тд..)

Конечно, используем.

У вас "инпут" не очищается, так как нет никакого кода за это отвечающего. Можете использовать например onBlur событие...

p.s. в целом код выглядит странно немного, может намудрили. Может сделать input неконтролируемым, оставить только "this.props.onChange", а в компонент Input передавать в value - todoName... (не вникал сильно в происходящее)
p.p.s. про контролируемые и не контролируемые компоненты на русском: раз (мини книжка по реакту, версия старая, но актуально в целом), два (переводы офф.документации)

Answer 3

[akochemasov]

Такой вариант - https://codepen.io/akochemasov/pen/NZBGxN