Редактирование ввода текста с помощью stati c данных о реагировании

Question

При использовании ввода текста с использованием this.state не имеет значения присвоить value переменную состояния, и вы сможете редактировать значение, в моем случае здесь я отображаю список, а когда я задаю value ввода текста я больше не могу редактировать это значение, потому что оно находится за пределами состояния, я не хочу использовать местозаполнитель для отображения значения, мне нужен способ иметь его в качестве значения, но также и иметь возможность редактировать это значение.

<TextInput
  keyboardType='decimal-pad'
  value={String(roomData.room_attached_dimensions.depth)}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

Также я не понимаю, почему я должен обернуть свои значения с помощью String, иначе ничего не отображается.

Мой список выглядит так

  const attachedRooms = this.state.rooms_attached.map((item, index) => (
      <View key={index}>
        ...
      </View>
   ))

Функция ничего особенного не делает

  handleRoomEdit = (value) => {
    this.setState({ roomEdit: true, value: value })
  }

Конечно, у меня разные входные данные, я просто не могу дать им разные имена, данные хранятся в asyncStorage, и даже если я отредактирую массив, он не будет работать, пока я не смонтирую чертовски компонент

Answer 1

Хорошо, это ваша ошибка. Вы не обрабатываете свои входные данные с состоянием. Вот почему это не работает. Вы можете сделать что-то вроде этого -

<TextInput
  keyboardType='decimal-pad'
  value={this.state.value || String(roomData.room_attached_dimensions.depth)}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

Я думаю, это должно работать. Теперь вы обрабатываете значение вашего ввода с помощью состояния. Или вы можете использовать defaultValue, чтобы дать начальное значение, но я думаю, что реагировать не рекомендуется, используя defaultValue и Value оба -

<TextInput
  keyboardType='decimal-pad'
  defaultValue={String(roomData.room_attached_dimensions.depth)}
  value={this.state.value}
  onChangeText={(value) => this.handleRoomEdit(value)}
/>

EDIT :: Также вы можете использовать ES6, чтобы сделать ваш код чистым -

  handleRoomEdit = (value) => {
    this.setState({ roomEdit: true, value }) //use ES6 shorthand //
  }