Блог

Я новичок в 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>    
  );
  }
}
  

Вот некоторые моменты, которые я вижу:

• Прежде всего, вы должны вернуть один корень из вашего возврата или несколько элементов с фрагментами (читайте фрагменты здесь). Итак, заверните их все в какой-нибудь один тег, например //your components и т.д.

• Вы назначаете в своем showName = true , а не проверяете. Использовать showName === true ? синтаксис.

И полный пример кода и запуска:

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

Я сделал то, что вам нужно. Вам нужна последовательность имен, независимо от того, что вы вводите в этом TextInput, но с помощью string это невозможно. Вам нужно взять массив для отображения всех значений, которые вы собираетесь ввести.

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