React native 使用TextInput上的name属性更新状态

React native 使用TextInput上的name属性更新状态,react-native,textinput,react-state-management,React Native,Textinput,React State Management,我正在尝试在表单中更新一次状态更改。当我输入表单时,我的应用程序因此错误崩溃 TypeError undefined is not an object react-native (evaluating e.target) 我正试图使用[e.target.name]来选择适当的状态,以便使用我的元素进行更新 也许我遗漏了一些小的东西,但我在react web项目中运行的代码几乎完全相同,而且工作正常 这是我目前的表格 export default class CreateNote extends

我正在尝试在表单中更新一次状态更改。当我输入表单时,我的应用程序因此错误崩溃

TypeError undefined is not an object react-native (evaluating e.target)
我正试图使用[e.target.name]来选择适当的状态,以便使用我的元素进行更新

也许我遗漏了一些小的东西,但我在react web项目中运行的代码几乎完全相同,而且工作正常

这是我目前的表格

export default class CreateNote extends Component {
  state = {
    modalVisible: false,
    title: "",
    who: "",
    time: ""
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  onTextChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  createNoteView=()=>{
    if(this.state.modalVisible === true){
      return (
        <View style={{ marginTop: 10 }}>

              <Button title="cancel" onPress={()=>this.setState({modalVisible:false})}></Button>

                <TextInput
                  placeholder="title"
                  name = "title"
                  type="text"

                  onChange={()=>{this.onTextChange()}}
                />


                <TextInput
                  placeholder="who"
                  name = "who"
                  type="text"

                  onChange={()=>{this.onTextChange()}}
                />


                <TextInput
                  placeholder="when"
                  name = "time"
                  type="text"

                  onChange={()=>{this.onTextChange()}}
                />
        </View>
      )
    }

    return (
      <View style={{ marginTop: 22, width: 150 }}>
          <Button onPress={()=>{this.setModalVisible(!this.state.modalVisible)}} title="create"></Button>
      </View>
    )

  }


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

  }
}

导出默认类CreateNote扩展组件{
状态={
modalVisible:错误,
标题:“,
谁:“,
时间:“
};
setModalVisible(可见){
this.setState({modalVisible:visible});
}
onTextChange=(e)=>{
this.setState({[e.target.name]:e.target.value});
};
createNoteView=()=>{
if(this.state.modalVisible==true){
返回(
this.setState({modalVisible:false}}>
{this.onTextChange()}}
/>
{this.onTextChange()}}
/>
{this.onTextChange()}}
/>
)
}
返回(
{this.setModalVisible(!this.state.modalVisible)}title=“create”>
)
}
render(){
返回(
{this.createNoteView()}
)
}
}

您应该使用下面的
onChangeText
方法

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

...other code...

<TextInput
  placeholder="title"
  onChangeText={this.onTextChange("title")}
/>
onTextChange = (name) => (event) => {
 this.setState({ [name]: event.nativeEvent.text });
};

...other code...

<TextInput
  placeholder="title"
  onChange={this.onTextChange("title")}
/>