2017-01-26 2 views
0

Мне нужно добавить окно ввода (input-0, input-1 ...) при каждом нажатии кнопки. Следующим является соответствующий код.e.target.value не определено при добавлении динамических входных данных в реакцию

// Государственного

 this.state = { 
     newText: {} 
     }; 

// Код для добавления динамического ввода текста

 addInputText =() => { 
     let dynamicTextsNo = Object.keys(this.state.newText).length; 
     let newInputId = dynamicTextsNo+1; 
     let dynamicTextArr = this.state.newText; 
     let newTextId = 'input-'+dynamicTextsNo; 
     dynamicTextArr[newTextId] = ''; 
     let newState = { ...this.state, newText: dynamicTextArr } 
     this.setState(newState); 
     } 

// Кода для отображения динамического текста ввода.

 dynamicTextArea =() => { 
     return Object.keys(this.state.newText).map((key) => { 
      return (<InputGroup key={key} borderType='underline'> 
         <Input placeholder='Type your text here' value={this.state.newText[key]} onChange={this.changeInput}/> 
        </InputGroup> 
       ); 
     }); 
     } 

// Рендер функция

 render() { 
     return <View>{this.dynamicTextArea()}</View> 
     } 

// обрабатывать входные

changeInput = (e) => { 
    console.log(e.target.value); // **this comes out to be undefined.** 
    } 

Почему e.target.value в функции changeInput Не определено?

P.S. Jsfiddle ссылка на полный код: https://jsfiddle.net/johnnash03/9by9qyct/1/

+0

Не могли бы вы загрузить свой код JSFiddle.net пожалуйста? Это облегчит вам задачу отладки вашей проблемы. –

+0

@KennyMeyer Я предоставил ссылку на полный код –

+0

@johndoe, я адаптировал ваш код для: https://jsfiddle.net/mrlew/gk55wLx1/. Но в changeInput нет ошибки. Проверьте консоль. – mrlew

ответ

0

Вы должны использовать bind как так <Input placeholder='Type your text here' value={this.state.newText[key]} onChange={this.changeInput.bind(this)}/>

+0

По-прежнему становится неопределенным после привязки. –

2

В отличие от элемента ввода текста браузера, event аргумент, переданный Реагировать Native TextInput.onChange обратного вызова не имеет свойство target.

Вместо этого используйте

<TextInput 
    onChange={(event) => event.nativeEvent.text} 
/> 

или

<TextInput 
    onChangeText={(text) => text} 
/> 
Смежные вопросы