Как вернуть текст из multi TextInput?

#react-native

#react-native

Вопрос:

Мы с другом разрабатываем приложение, и мы застряли на проблеме… Мы хотим спросить имена некоторых игроков. Мы нажимаем на кнопку, чтобы добавить некоторый текстовый ввод. (Здесь все в порядке) Но теперь мы хотим вернуть тексты, которые мы ввели.

Я пытался сохранить их в состоянии, но я знаю, как это сделать с одним текстом, но не со многими.

  addTextInput = (key) => {
    let textInput = this.state.textInput;
    if (textInput.length < 10) {
        *textInput.push(<TextInput style={{ height: 40, borderColor: 'black', borderWidth: 2 }} key={key}
            onChangeText={(text) => this.setState({ nomJoueur: text })}
        />);*
        Data.addNombreJoueur();
        console.log(nombreJoueurs);
    }
    this.setState({ textInput })
}
  

Я попробовал это, чтобы :

 addTextInput = (key) => {
    let textInput = this.state.textInput;
    let nomJoueur = this.state.nomJoueur;
    if (textInput.length < 10) {
        textInput.push(<TextInput style={{ height: 40, borderColor: 'black', borderWidth: 2 }} key={key}
            onChangeText={
                (text) => nomJoueur.push(text)
            }
            nomParticipants2={this.state.nomJoueur}
        />);
        Data.addNombreJoueur();
        console.log(nombreJoueurs);
    }
    this.setState({ textInput })
}
  

Но при этом я получаю

 "nomParticipants2": Array [
[23:17:16]           "z",
[23:17:16]           "ze",
[23:17:16]           "zed",
[23:17:16]           "zedz",
[23:17:16]           "zedzx",
[23:17:16]           "zedzxz",
[23:17:16]           "zedzxzx",
[23:17:16]           "r",
[23:17:16]           "rz",
[23:17:16]           "rze",
[23:17:16]           "rzez",
[23:17:16]           "rzezd",
[23:17:16]           "e",
[23:17:16]           "ez",
[23:17:16]           "ezc",
[23:17:16]           "ezcz",
[23:17:16]           "ezczc",
[23:17:16]         ],
  

Мне действительно нужна ваша помощь!
Спасибо, ребята

РЕДАКТИРОВАТЬ: Спасибо Nerdragen за вашу помощь

Чтобы решить мою проблему, у меня есть n разных функций для добавления inputText :

 addTextInput = (key) => {
    console.log('Bonjour');
    let textInput = this.state.textInput;
    let nomJoueur0 = this.state.nomJoueur0;
    let nomJoueur1 = this.state.nomJoueur1;
    let nomJoueur2 = this.state.nomJoueur2;
    let nomJoueur3 = this.state.nomJoueur3;
    ...

    if (textInput.length == 0) {
        textInput.push(<TextInput style={{ height: 40, borderColor: 'black', borderWidth: 2 }} key={key}
            onChangeText={(text) => this.setState({ nomJoueur0: text })
            }/>);
        Data.addNombreJoueur();
        console.log(nombreJoueurs);
    }
    else if (textInput.length == 1) {
        textInput.push(<TextInput style={{ height: 40, borderColor: 'black', borderWidth: 2 }} key={key}
            onChangeText={(text) => this.setState({ nomJoueur1: text })
            }/>);
        Data.addNombreJoueur();
        console.log(nombreJoueurs);
    }
...
  

Ответ №1:

Если у вас всего несколько TextInput и вы не возражаете против создания дополнительных функций, вы всегда можете просто создать отдельную функцию для каждого компонента. Более чистое решение — изменить ваш текущий onChangeText на onChangeText={значение=> this.setState({значение})}, где значение — это имя переменной в состоянии. Итак, используя приведенный выше фрагмент, если вы изменили значение на username , то this.state.username оно будет обновлено.

Комментарии:

1. Во-первых, спасибо за ваш ответ. На самом деле, я не могу создать отдельную функцию для каждого компонента, потому что компоненты создаются с помощью другой функции (а если и могу, то не знаю как). И то, что вы предлагаете, работает, но только для последнего слова. Это работает не для всех из них. Я не знаю, как сохранить их в разных переменных, но с одинаковым именем. (Вы понимаете, что я имею в виду?)

2. Если я правильно понимаю, что вы хотите, вы хотите, чтобы несколько входных данных отображались в одну переменную. Это настоятельно не рекомендуется, поскольку входные данные будут сбрасывать переменную при каждом изменении. Чтобы обойти эту проблему, вам придется установить эту переменную в виде массива и заставить каждый ввод помещать значение в этот массив.

3. Это именно то, чего я хочу. Но, как вы говорите, при каждом изменении происходит обновление, затем все сохраняется (см. последний код: Nomparticipants 2). Я не знаю, как получить только последнее обновление для каждого ввода.

4. Вы не можете. Невозможно получить только последний ввод, не зная предыдущих вводов. Иначе, как это может быть последним вводом? Здесь есть 2 решения, которые я могу придумать. 1. использовать массив и помещать каждый отдельный ввод в отдельный индекс массива, затем просто получить конечный массив. Но это беспорядочно. 2, поскольку вы пытаетесь получить только name, вы знаете, что входные данные должны быть в алфавитном порядке. Вы можете заставить один ввод принимать только буквы и запятые и заставить пользователя использовать запятые для разделения имен, а затем просто разбить строку на массив имен.