使用 TextInput 上的名称属性更新状态 react-native
updating state using name attribute on TextInput react-native
我正在尝试更新表单中的 onChange 状态。当我输入表单时,我的应用程序崩溃并出现此错误
TypeError undefined is not an object react-native (evaluating e.target)
我正在尝试使用 [e.target.name] 来 select 使用我的元素更新适当的状态。
也许我遗漏了一些小东西,但我在 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>
)
}
}
您应该使用如下 onChangeText
方法。
onTextChange = (name) => (value) => {
this.setState({ [name]: value });
};
...other code...
<TextInput
placeholder="title"
onChangeText={this.onTextChange("title")}
/>
可以参考onChangeText
here
如果你想使用 onChange
而不是 onChangeText
那么你应该使用像 event.nativeEvent.text
这样的东西
onTextChange = (name) => (event) => {
this.setState({ [name]: event.nativeEvent.text });
};
...other code...
<TextInput
placeholder="title"
onChange={this.onTextChange("title")}
/>
我正在尝试更新表单中的 onChange 状态。当我输入表单时,我的应用程序崩溃并出现此错误
TypeError undefined is not an object react-native (evaluating e.target)
我正在尝试使用 [e.target.name] 来 select 使用我的元素更新适当的状态。
也许我遗漏了一些小东西,但我在 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>
)
}
}
您应该使用如下 onChangeText
方法。
onTextChange = (name) => (value) => {
this.setState({ [name]: value });
};
...other code...
<TextInput
placeholder="title"
onChangeText={this.onTextChange("title")}
/>
可以参考onChangeText
here
如果你想使用 onChange
而不是 onChangeText
那么你应该使用像 event.nativeEvent.text
onTextChange = (name) => (event) => {
this.setState({ [name]: event.nativeEvent.text });
};
...other code...
<TextInput
placeholder="title"
onChange={this.onTextChange("title")}
/>