2015-04-01 3 views
2

У меня есть простое текстовое поле (<input type="text"/>) компонент (дочерний компонент), который должен показывать только значение, получаемое от его родительского компонента. Это readonly, и пользователь не может изменить значение.Как обновить неконтролируемое/readonly значение ввода из родительского компонента?

Моя проблема заключается в том, что текстовое поле визуализируется один раз с правильным значением, но затем не обновляется, как только изменяется значение в родительском компоненте. Значение остается неизменным, хотя метод render вызывается каждый раз, когда родительский компонент меняет свой state (проверьте консоль).

Вот jsfiddle, чтобы продемонстрировать мою проблему.

Любые идеи, как решить эту проблему?

ответ

3

Вы должны использовать опору вместо defaultValue. Here's an updated jsfiddle.

+0

Ура! Как бы вы сделали такой компонент текстового поля более общим, чтобы его также можно было использовать для ввода пользователя? – zemirco

+1

Он должен вызывать обработчик события onChange (newValue) каждый раз, когда его значение мутируется пользователем, так что владелец ввода может обновить свое состояние и повторно отобразить текстовое поле с новым значением. Короче говоря, вы создаете свой собственный [контролируемый компонент] (https://facebook.github.io/react/docs/forms.html). –

+1

Но тогда вы должны использовать 'this.state.value' вместо' this.props.value' для ввода 'значение', правильно? Это моя проблема. Я думаю, что это не работает, чтобы иметь собственное полевое обновление и в то же время разрешать обновления из родительского компонента. Это было бы против «единого источника истины». Мне придется распространять изменения до родителя. В любом случае спасибо за первоначальную помощь. – zemirco

0

defaultValue Используется только при первоначальном рендеринге. (источник: https://github.com/facebook/react/issues/2764#issuecomment-67890726)

Если заменить defaultValue с value это работает: http://jsfiddle.net/hnc7fobu/1/

(И это нормально, так как у вас есть READONLY атрибут, вы не получите это предупреждение: Failed propType: вы предоставили value опоры в поле формы без onChange обработчика. Это будет оказывать поле только для чтения. Если поле должно быть изменяемым использованием defaultValue. в противном случае, установите либо onChange или readOnly.)

+0

Приветствия! Как бы вы сделали такой компонент текстового поля более общим, чтобы его также можно было использовать для ввода пользователя? – zemirco