Реакция Нативный текстовый текст с несколькими текстовыми полями

Я нашел код примера на странице facebook React Native, в которой показано, как использовать setNativeProp для очистки текста нажатием кнопки, но я не вижу, как это сделать с несколькими текстовыми полями. Вот код:

var App = React.createClass({
 clearText() {
 this._textInput.setNativeProps({text: ''});
 },
 render() {
 return (
 <view style="{styles.container}">
 <textinput ref="{component" ==""> this._textInput = component}
 style={styles.textInput} />
 <touchableopacity onpress="{this.clearText}">
 <text>Clear text</text>
 </touchableopacity>
 </textinput></view>
 );
 }
});

Ссылка, похоже, исправлена ​​в функции, поэтому всегда будет нацелена на тот же блок TextInput. Как я могу изменить функцию для таргетинга на любое поле TextInput, которое я указываю?

2 ответа

Это должно сработать. Обратите внимание, что ссылка ref на TextInput должна быть той, которую вы вызываете из функции clearText functino.

var App = React.createClass({
 clearText(fieldName) {
 this.refs[fieldName].setNativeProps({text: ''});
 },
 render() {
 return (
 <view style="{styles.container}">
 <textinput ref="{'textInput1'}" style="{styles.textInput}">
 <touchableopacity onpress="{()" ==""> this.clearText('textInput1')}>
 <text>Clear text</text>
 </touchableopacity>
 <textinput ref="{'textInput2'}" style="{styles.textInput}">
 <touchableopacity onpress="{()" ==""> this.clearText('textInput2')}>
 <text>Clear text</text>
 </touchableopacity>
 </textinput></textinput></view>
 );
 }
});

Обновлен мой ответ, чтобы очистить разные поля.


Вы также можете использовать что-то вроде этого, чтобы очистить текст TextInput.

clearText(fieldName) {
 this.refs[fieldName].clear(0);
},

licensed under cc by-sa 3.0 with attribution.