Реализация this.state?

Question

[thistlemr11]

class AddInfo extends Component{


    state={
        value:""
    }


    render() {

        const {classes}=this.props
        const newStyles=injectSheet(styles)(AddInfo)
        const val=this.state.value



        return (

            <div>

                <input  type="text" className={classes.positionForm} onChange={this.changeState} />
                <input type="submit" value="value" />
                {val}

            </div>
        );
    }
    changeState=(event)=>{
        this.setState({
            value:event.target.value
        })
    }
}

Доброй ночи,я,будучи новичком в Реакте,столкнулся с проблемой реализации:
Есть вот такой вот код.Используя state я вывожу ниже всё,что написал в форме,однако столкнулся с проблемой,которую совершенно не знаю как решить:

При вводе я ПЛАНИРОВАЛ сделать так,что,нажимая на кнопку/убирая курсор с моей формы,введенные данные отображаются снизу,а форма ресетается и становится пустой.
Естественно,код за меня писать не нужно,просто был бы рад услышать хоть какие-то идеи.
(За отсутствие стилей не убивайте)
Заранее спасибо за любой совет

Answer 1

[0xD34F]

В стейте должно быть два свойства - значение инпута и его копия. В обработчике onChange инпута обновляете значение инпута; в обработчиках onClick кнопки и onMouseLeave формы копируете во второе свойство значение инпута, а само его сбрасываете.

Или можете попробовать обойтись одним свойством в стейте, но тогда потребуется добавить ref на инпут. Обрабатывать change в этом случае не надо.

Comments

[thistlemr11]

Спасибо.Как всегда здесь выручили)