@thistlemr11

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

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 я вывожу ниже всё,что написал в форме,однако столкнулся с проблемой,которую совершенно не знаю как решить:
5d0977f99514b565598520.png
При вводе я ПЛАНИРОВАЛ сделать так,что,нажимая на кнопку/убирая курсор с моей формы,введенные данные отображаются снизу,а форма ресетается и становится пустой.
Естественно,код за меня писать не нужно,просто был бы рад услышать хоть какие-то идеи.
(За отсутствие стилей не убивайте)
Заранее спасибо за любой совет
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
В стейте должно быть два свойства - значение инпута и его копия. В обработчике onChange инпута обновляете значение инпута; в обработчиках onClick кнопки и onMouseLeave формы копируете во второе свойство значение инпута, а само его сбрасываете.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы