Question

每次点击按钮时我都需要添加一个输入框（input-0，input-1 ...）。以下是相关代码。

//状态

      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.**
  }

为什么changeInput函数中的e.target.value未定义？

P.S。 Jsfiddle链接的完整代码：https://jsfiddle.net/johnnash03/9by9qyct/1/

Answer 1

与浏览器文本输入元素不同，传递给React Native event回调的TextInput.onChange参数没有名为target的属性。

相反，请使用

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

或

<TextInput
  onChangeText={(text) => text}
/>

Answer 2

您必须像bind

一样使用<Input placeholder='Type your text here' value={this.state.newText[key]} onChange={this.changeInput.bind(this)}/>

在反应中添加动态输入数据时，未定义e.target.value

2 个答案: