从子级更改父级组件道具/状态

Question

I'm currently learning REACT to create a web app. In this app, I have a list of selectedCharacters in the parent's state and in each child component I have an input for the player name. I'm struggling to update the player name in the parent's state.

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>
  );
};

Help will be appreciated.

Answer 1

What you will do is pass the changePlayerName function as a prop to CharactersSelection and from there pass it further down to CharacterCardSelected component. Now onChange of CharacterCardSelected call the method this.props.changePlayerName(name);

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} onChange={this.changePlayerName} />);  
  }
}

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} onChange={(newName) => {props.onChange(char,newName)}}/>
          ))}
        </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);
              props.onChange(e.target.value)
            }}
          />
        </div>
      </div>
    </div>
  );
}; 

Answer 2

Expanding on Michael's answer:

class Parent extends React.Component {
  state = { someValue: "" }

  onChangeValue = (event) => {
    this.setState({ someValue: event.target.value })
  }

  render () {
    const { someValue } = this.state
    return (
      <Child onChangeValue={this.onChangeValue} value{someValue}/>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <input 
        onChange={this.props.onChangeValue} 
        value={this.props.value}
      />
    )
  }
}

This is a common pattern in React called Lifting State Up

Answer 3

Try creating a function in the parent component and then passing it to the Child component. Assign the name to a state variable in the parent and pass that to the child component.

Answer 4

Pass the changePlayerName function to the lowest child. From there you need to trigger the setState of the parent component, in order to change the player's name.

class Game extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            selectedCharacters: [{
              "name": "LoupGarou",
              "imgName": "base_loup.png",
              "uniqueKey": "loup",
              "playerName": ""
            }, {
              "uniqueKey": "voyante",
              "imgName": "base_voyante.png",
              "name": "Voyante",
              "maxInGame": 1,
              "left": 1
            }]
          }
        }
        changePlayerName = (index, newName) => {
          this.setState({
            selectedCharacters[index].playerName: newName
          });
        };
        render() {
          const {
            selectedCharacters
          } = this.state;
          return ( < CharactersSelection selectedCharacters = {
              selectedCharacters
            }
            changePlayerName = {
              this.changePlayerName
            }
            />);
          }
        }
        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, index) => ( <
                      CharacterCardSelected key = {
                        index
                      }
                      imgName = {
                        char.imgName
                      }
                      changePlayerName = {
                        props.changePlayerName
                      }
                      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) => props.changePlayerName(props.key, e.target.value)
                    }
                    /> < /div > < /div> < /div > );
                };