React Native中TextInput值无法更新问题求助

你当前的TextInput属于非受控组件写法：虽然用onChangeText更新了workoutName状态，但没有通过value属性将状态与输入框绑定。TextInput内部会维护自己的输入状态，子元素{workout.name}只是初始渲染的内容，一旦用户开始编辑，输入框的显示就不再受你的状态控制——哪怕你重置workoutName，输入框也不会同步更新。

把TextInput改成受控组件，通过value属性绑定workoutName状态，让输入框的显示完全由状态驱动，重置状态就能同步恢复原始值。

修改后的输入框代码 #

<TextInput
   style={styles.workoutheader}
   editable={editableWorkout == workout.id}
   onChangeText={(workoutName) => setWorkoutName(workoutName)}
   value={workoutName} // 关键：添加value绑定状态
/>

额外注意事项 #

• 初始化workoutName状态时，要设为workout.name，保证输入框初始显示正确：

  const [workoutName, setWorkoutName] = useState(workout.name);
  

• 进入编辑状态时，务必把prevWorkoutName赋值为当前的workout.name（即原始值），确保取消操作能正确恢复。

你的取消按钮逻辑无需改动，只要输入框改为受控组件，调用setWorkoutName(prevWorkoutName)后，输入框就会自动显示原始内容。

内容的提问来源于stack exchange，提问作者kobo