如何在useState中把不同的字符串合并成一个对象？

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

如果你使用的是......[value, setValue] = useState({ title: '', ...) 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 >