У меня есть простое текстовое поле (<input type="text"/>
) компонент (дочерний компонент), который должен показывать только значение, получаемое от его родительского компонента. Это readonly
, и пользователь не может изменить значение.Как обновить неконтролируемое/readonly значение ввода из родительского компонента?
Моя проблема заключается в том, что текстовое поле визуализируется один раз с правильным значением, но затем не обновляется, как только изменяется значение в родительском компоненте. Значение остается неизменным, хотя метод render
вызывается каждый раз, когда родительский компонент меняет свой state
(проверьте консоль).
Вот jsfiddle, чтобы продемонстрировать мою проблему.
Любые идеи, как решить эту проблему?
Ура! Как бы вы сделали такой компонент текстового поля более общим, чтобы его также можно было использовать для ввода пользователя? – zemirco
Он должен вызывать обработчик события onChange (newValue) каждый раз, когда его значение мутируется пользователем, так что владелец ввода может обновить свое состояние и повторно отобразить текстовое поле с новым значением. Короче говоря, вы создаете свой собственный [контролируемый компонент] (https://facebook.github.io/react/docs/forms.html). –
Но тогда вы должны использовать 'this.state.value' вместо' this.props.value' для ввода 'значение', правильно? Это моя проблема. Я думаю, что это не работает, чтобы иметь собственное полевое обновление и в то же время разрешать обновления из родительского компонента. Это было бы против «единого источника истины». Мне придется распространять изменения до родителя. В любом случае спасибо за первоначальную помощь. – zemirco