如何从useState中的不同字符串合并为一个object？

Question

我需要使用来自不同文本输入的不同数据写入值挂钩

const [value, setValue] = useState({
  title: '',
  url: '',
  description: '',
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={text => handleChange(text)}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

错误的处理程序

const handleChange = val => {
  setValue({
    value: {
      title: val,
      url: val,
      description: val,
    },
  });
};

谢谢。

Answer 1

您可以使用指示来指示您指的是哪种键：

const handleChange = ({ type, text }) =>
  setValue((prev) => ({ ...prev, [type]: text }));

const [value, setValue] = useState({
  title: "",
  url: "",
  description: "",
});

<View style={styles.input_container}>
  <TextInput
    onChangeText={(text) => handleChange({ type: `title`, text })}
    value={value.title}
    placeholder="enter book title"
  />
  <TextInput
    onChangeText={(text) => handleChange({ type: `url`, text })}
    value={value.url}
    placeholder="link to book"
  />

  <TextInput
    onChangeText={(text) => handleChange({ type: `description`, text })}
    value={value.description}
    placeholder="description"
  />
  <Button title="add" onPress={pressHandler} />
</View>;

Answer 2

如果你使用useState钩子，你可以这样做。

 const [title, setTitle] = useState(''); const [url, setUrl] = useState(''); const [description, setDescription] = useState(''); < View style = { styles.input_container } > < TextInput onChangeText = { text => setTitle(text) } value = { value.title } placeholder = "enter book title" / > < TextInput onChangeText = { text => setUrl(text) } value = { value.url } placeholder = "link to book" / > < TextInput onChangeText = { text => setDescription(text) } value = { value.description } placeholder = "description" / > < Button title = "add" onPress = { pressHandler } /> < / View >