2

我正在使用 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

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

4

3 回答 3

5

我使用“onChangeText”。

<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 }));
  }
于 2018-03-24T16:38:42.097 回答
3

看看这个

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

谢谢

于 2018-07-12T02:28:32.707 回答
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>

这肯定对我有用。也可能对你有用。

于 2020-08-13T07:57:56.317 回答