В рамках моего небольшого обучающего проекта React у меня есть компонент, который извлекает случайные фэнтезийные имена из этого пакета NPM: https://www.npmjs.com/package/fantasy-name-generator.
Нажмите здесь, чтобы увидеть изображение генератора случайных имен
Как показано выше, каждый раз, когда вы нажимаете «Случайно!», вы получаете новое имя.
Ниже приведен код компонента:
import React from "react"
export default function TopSection(props) {
return (
<div className = "col text-center">
<input className = "form-control" value = {props.randomName}/>
<label>{props.label}</label>
</div>
)
}
Ниже приведен код приложения React.
function App() {
const [x,setCharacterName] = React.useState("")
const elfHero = nameByRace("elf", { gender: "male" })
function randomNameGenerator(){
return elfHero
}
const handleClick = () => {
setCharacterName(randomNameGenerator)
}
return (
<div className = "App ">
{/* TOP SECTION */}
<div className = "container-flex">
<div className = "row mb-4 gx-3" style = {{ margin: "auto" }}>
<div className = "col-12 col-lg-2 bg-light border border-danger rounded mr-3 ">
<img src = {DnDLogo} alt = "dnd-logo" className = "dndlogo" />
<TopSection label = "CHARACTER NAME" randomName = {elfHero}/>
<a href = "#" class = "link-danger" onClick = {handleClick}>
Randomize 🎲!
</a>
</div>
У меня две проблемы:
Спасибо!
Чтобы получить новое имя только по клику, вы можете переместить логику в handleClick
.
Приложение
const [characterName, setCharacterName] = useState("");
const handleClick = (e) => {
e.preventDefault();
const elfHero = nameByRace("elf", { gender: "male" });
setCharacterName(elfHero);
};
return (
...
<TopSection label = "CHARACTER NAME" randomName = {characterName} />
...
);
Чтобы позволить пользователю изменять значение на входе, вы можете добавить состояние. Это позволит, когда randomName изменится, соответствующим образом обновить ввод и позволить пользователю изменить его содержимое.
export default function TopSection(props) {
const [name, setName] = useState("");
useEffect(() => {
setName(props.randomName);
},[props.randomName]);
return (
<div className = "col text-center">
<input
className = "form-control"
value = {name}
onChange = {(e) => setName(e.target.value)}
/>
<label>{props.label}</label>
</div>
);
}
Если вы хотите, чтобы ваше состояние characterName было просто в приложении, вы можете использовать такой подход. Где вы даете TopSection
обработчик onChange, который обновит characterName
. Логика hanldeClick
остается той же в первом подходе.
Приложение
const [characterName, setCharacterName] = useState("");
const handleChangeEvent = (e) => {
setCharacterName(e.target.value);
}
const handleClick = (e) => {
e.preventDefault();
const elfHero = nameByRace("elf", { gender: "male" });
setCharacterName(elfHero);
};
return (
...
<TopSection
label = "CHARACTER NAME"
randomName = {characterName}
handleChangeEvent = {handleChangeEvent}
/>
...
);
Верхний раздел
export default function TopSection(props) {
return (
<div className = "col text-center">
<input
className = "form-control"
value = {props.randomName}
onChange = {props.handleChangeEvent}
/>
<label>{props.label}</label>
</div>
);
}
Работал! Большое спасибо. Мне еще многое предстоит узнать о React, и я еще не добрался до раздела useEffect. Скоро доберусь.
Вы добавляете useEfect для проблемы № 2? вы можете определить хук useEffect для этого и добавить для него зависимость. как только изменение зависимости загрузит пакет