Question

我正在使用NativeBase作为反应原生应用。我正在尝试在输入字段上更改文本时触发事件

<Input style={Styles.VehicleMeterCenter} placeholder={this.props.item['name']} 
                    value={this.state.item.name} onChange={this.onFieldChange}/>

onFieldChange处理程序如下： -

    onFieldChange(e)
  {

    console.log("Master");
    console.log(e);

    console.log("Native Event");
    console.log(e.nativeEvent);

    const {name,type,value} = e.nativeEvent;
    console.log(name + " : " + type + " : " + value);
    //this.setState({item:{name:val}});
  }

我对我得到的输出感到困惑，没有类型，值或名称。我不知道如果处理程序是从哪个输入字段触发的，我如何分类，因为这些结构中没有这样的信息。

输出上述代码：

    10:40:46 AM: Master

10:40:46 AM: {"dispatchConfig":null,"_targetInst":null,"isDefaultPrevented":null,"isPropagationStopped":null,"_dispatchListeners":null,"_dispatchInstances":null,"type":null,"target":null,"eventPhase":null,"bubbles":null,"cancelable":null,"defaultPrevented":null,"isTrusted":null,"nativeEvent":null}

10:40:46 AM: Native Event

10:40:46 AM: {"target":622,"eventCount":1,"contentSize":{"height":24,"width":399470.46875},"text":"D"}

10:40:46 AM: undefined : undefined : undefined

我想要实现的是我应该能够识别哪个输入字段触发了事件，并且还获得了插入的值。

Answer 1

我使用＆＃34; onChangeText＆＃34;。

<TextInput onChangeText={(txt) => this.handleChange("name", txt)}>{this.state.name}</TextInput>

我的handleChange函数如下所示：

  handleChange(name, value) {
    this.setState(() => ({ [name]: value }));
  }

您还可以使用onChange，如：

<TextInput onChange={(evt) => this.handleChange(evt, "name")}>{this.state.name}</TextInput>

在这种情况下，您的功能将如下所示：

handleChange(evt, name) {
    const { text } = evt.nativeEvent;
    this.setState(() => ({ [name]: text }));
  }

Answer 2

看看这个

 handleChange(event, name) {
    this.setState(() => ({ [name]: event.nativeEvent.text }));
  }

谢谢

Answer 3

我知道这是一篇旧文章，但是可以肯定的是，答案需要更新。

changeText =(e)=>{
    // fetches the props passed in textInput ... remove the console to understand more
    // console.log("e",e.target._internalFiberInstanceHandleDEV.memoizedProps) 

    // fetches  value
    // console.log("e",e.nativeEvent.text)
    let name = e.target._internalFiberInstanceHandleDEV.memoizedProps.name // fetches name i.e "Testing"
    let value = e.nativeEvent.text
    console.log(name)
    this.setState({...this.state,
       signUpfields : {...this.state.signUpfields,
            [name]:value
       }
    })
}

<View>
    <Text>{text}</Text>
        <TextInput
           placeholder="testing a textinput"
           name="Testing" 
           onChange={this.changeText}
           defaultValue="Test"
        >
    </TextInput>
</View>

这肯定对我有用。也可能为您工作。

react onChange事件的名称类型值为undefined

3 个答案: