setState() 将 Proxy 对象添加到 属性 而不是 react native 中的字符串值
setState() adds a Proxy object to property instead of string value in react native
这是一个非常奇怪的问题,我确信我忽略了一些非常简单的事情。
当我加载新组件 AddNewCategory
时,我最初将空字符串设置为 this.state
上的 text
属性。登录控制台也显示 text
值为空。
我使用 Button
组件的 onChange
更新此值。我知道 text
属性 目前正在按预期更新,因为输入字段的值会相应更改。
<Button onChange={text=>this.setState({})}>
但是当我尝试检索 text
属性 的值时,我看到 text
现在被分配了一个 Proxy
对象,而不是字符串。
我只是想获取输入字段的值,以便将值传递给动作创建者。
这是完整的代码,
import React from 'react';
import { View, Text, TextInput, Button} from 'react-native';
class AddNewCategory extends React.Component {
constructor(props) {
super(props)
this.state={
text: ''
};
console.log('after initialising constructor');
console.log(this.state);
this.onContinueButtonPress = this.onContinueButtonPress.bind(this);
}
onContinueButtonPress() {
console.log('after onContinueButtonPress');
console.log(this.state);
this.props.addNewCategory('Random Value');
}
render(){
return(
<View>
<Text>Name your new task list</Text>
<TextInput
placeholder="Things to do today.."
value={this.state.text}
onChange={(text)=>this.setState({text: text})}
/>
<Button
title={'Continue'}
onPress={this.onContinueButtonPress}
/>
</View>
);
}
};
export default AddNewCategory;
我不知道你为什么要给 Button 组件一个 onChange 属性。
无论如何,对于 TextInput,您应该给 onChangeText 属性。
<TextInput onChangeText={text => this.setState({ text })}
其他属性已被省略。
只使用onChange
就像在做web开发时处理通常的onChange事件,回调方法的第一个参数只给出事件;要获得实际输入值,您必须说 event.target.value
.
onChange={(event) => console.log(event.target.value)}
这是一个非常奇怪的问题,我确信我忽略了一些非常简单的事情。
当我加载新组件 AddNewCategory
时,我最初将空字符串设置为 this.state
上的 text
属性。登录控制台也显示 text
值为空。
我使用 Button
组件的 onChange
更新此值。我知道 text
属性 目前正在按预期更新,因为输入字段的值会相应更改。
<Button onChange={text=>this.setState({})}>
但是当我尝试检索 text
属性 的值时,我看到 text
现在被分配了一个 Proxy
对象,而不是字符串。
我只是想获取输入字段的值,以便将值传递给动作创建者。
这是完整的代码,
import React from 'react';
import { View, Text, TextInput, Button} from 'react-native';
class AddNewCategory extends React.Component {
constructor(props) {
super(props)
this.state={
text: ''
};
console.log('after initialising constructor');
console.log(this.state);
this.onContinueButtonPress = this.onContinueButtonPress.bind(this);
}
onContinueButtonPress() {
console.log('after onContinueButtonPress');
console.log(this.state);
this.props.addNewCategory('Random Value');
}
render(){
return(
<View>
<Text>Name your new task list</Text>
<TextInput
placeholder="Things to do today.."
value={this.state.text}
onChange={(text)=>this.setState({text: text})}
/>
<Button
title={'Continue'}
onPress={this.onContinueButtonPress}
/>
</View>
);
}
};
export default AddNewCategory;
我不知道你为什么要给 Button 组件一个 onChange 属性。
无论如何,对于 TextInput,您应该给 onChangeText 属性。
<TextInput onChangeText={text => this.setState({ text })}
其他属性已被省略。
只使用onChange
就像在做web开发时处理通常的onChange事件,回调方法的第一个参数只给出事件;要获得实际输入值,您必须说 event.target.value
.
onChange={(event) => console.log(event.target.value)}