如何检索文本输入在按钮上输入的值单击React Native中的onPress？

Posted 2021-04-04

我是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>
  );
}
}

另一答案

以下是我看到的一些观点：

• 首先，你应该返回一个返回的单个根或带有片段的多个元素（读取片段here）。所以将它们全部包装在一些标签中，比如//你的组件等。
• 您在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> 
      );
  }
}