我目前正在学习 REACT 来创建一个网络应用程序。在这个应用程序中,我有一个处于父状态的 selectedCharacters 列表,并且在每个子组件中我都有一个玩家姓名的输入。我正在努力更新父母状态下的玩家姓名。
class Game extends React.Component {
state = {
selectedCharacters: [{"name":"Loup Garou","imgName":"base_loup.png","uniqueKey":"loup","playerName":""},{"uniqueKey":"voyante","imgName":"base_voyante.png","name":"Voyante","maxInGame":1,"left":1}]
};
changePlayerName = (char, newName) => {
char.playerName = newName;
};
render() {
const { selectedCharacters } = this.state;
return(<CharactersSelection selectedCharacters={selectedCharacters} />);
}
}
const CharactersSelection = props => {
return (
<div className="row col-12 char-list">
<div className="col-md-9 col-xl-10 char-selected pad-r-10 pad-l-10">
<div className="row char-selected-content">
{props.selectedCharacters.map((char, i) => (
<CharacterCardSelected key={i} imgName={char.imgName} name={char.name} playerName={char.playerName}/>
))}
</div>
</div>
</div>
);
};
const CharacterCardSelected = props => {
return (
<div className="d-flex char-card-selected" id={props.id}>
<img alt={props.imgName} className="char-img-sm" src=require("../../public/images/" + props.imgName)}/>
<div className="char-card-selected-txt">
<div>
<input
type="text"
className="form-control player-name"
placeholder="Nom joueur..."
value={props.playerName}
onChange={e => {console.log(e)}}
/>
</div>
</div>
</div>
);
};
帮助将不胜感激。