我是React Native的新手,我无法逐个检索我在textInput上输入的内容。
示例:如果我输入了一些名称,它应该逐个出现......
state = {
name: "",
showName: false
};
buttonClickListner = e => {
const { showName } = this.state;
this.setState({ showName: true });
};
render() {
const { name } = this.state;
return (
<TextInput
style={{ height: 150 }}
placeholder="Enter a Name...."
value={name}
onChangeText={val => {
this.setState({
name: val
});
}}
/>
<Button
onPress={this.buttonClickListner}
title="Submit"
color="#008000"
/>
<Text>{(showName = true ? name : null)}</Text>
);
}
}
我做了你需要的。无论你在TextInput中输入什么,都需要一个名称序列,但是使用字符串是不可能的。您需要使用数组来显示您要输入的所有值。
export default class App extends React.Component {
state = {
name: [],
showName: false,
text:""
};
buttonClickListner = e => {
this.state.name.push( this.state.text.toString() );
this.setState({text:""})
};
render() {
const { name } = this.state;
return (
<View>
<TextInput
style={{ height: 150 }}
placeholder="Enter a Name...."
value={this.state.text}
onChangeText={val => {
this.setState({
text: val
});
}}
/>
<Button
onPress={this.buttonClickListner}
title="Submit"
color="#008000"
/>
{this.state.name.length>0?this.state.name.map(item=>(<Text>{item}</Text>)):null}
</View>
);
}
}
以下是我看到的一些观点:
showName = true
中分配而不是检查。使用showName === true
?句法。完整的代码和runnig sample:
import * as React from 'react';
import { Button, TextInput, Text, View} from 'react-native';
export default class App extends React.Component{
state = {
name: "",
showName: false
};
buttonClickListner = e => {
const { showName } = this.state;
this.setState({ showName: true });
};
render() {
const { name, showName } = this.state;
return (
<View>
<TextInput
style={{ height: 150 }}
placeholder="Enter a Name...."
value={name}
onChangeText={val => {
this.setState({
name: val
});
}}
/>
<Button
onPress={this.buttonClickListner}
title="Submit"
color="#008000"
/>
<Text>{(showName === true ? name : null)}</Text>
</View>
);
}
}