将单选按钮值添加到react中的父组件

Question

父组件存储所有状态。

函数myChangeHandler触发任何onChange并更改状态

myChangeHandler（事件）{this.setState（{[event.target.name]：event.target.value}）；

在改变单选按钮的值应该返回在"指南是"行这里是代码，让我知道如果我错过了什么

// Get a hook function
const {useState} = React;

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      avail:'available',
      $avail:'non-available',
      brandGuideline:'',
    };
    this.myChangeHandler = this.myChangeHandler.bind(this);
  }

  myChangeHandler(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }render(){
    return(
      <div>
        <Child username = {this.state.username}
          myChangeHandler = {this.myChangeHandler}
          />
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <div className="label">
        <label>
          username
        </label>
        <input
          type='text'
          name='username'
          value={this.props.username}
          onChange={this.props.myChangeHandler}
          />
        <h1>My username: {this.props.username}</h1>
        <div>
          <label>
            We have a Brand Guide
          </label>
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.$avail}
            onChange={this.props.myChangeHandler}
            />Yes
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.avail}
            onChange={this.props.myChangeHandler}
            /> No
        </div>
        <h1>Guide is: {this.props.brandGuideline}</h1>
      </div>
    );
  }
};

ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);

[event.target.name]: event.target.value

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

您是否错过了从子级到父级获取传递的事件。

myChangeHandler(event){
......
}

Answer 2

您的问题与从父级到子级缺少道具数据有关。

喜欢写作：

value={this.state.i_am_not_exist_prop}；

之前

{/* Parent Before */}
<Child username = 
  {this.state.username}
  myChangeHandler = {this.myChangeHandler}
/>

发送avail和$avail作为道具。

应该是：

{/* Parent After step 1*/}
<Child 
 username = {this.state.username}
 myChangeHandler = {this.myChangeHandler}
 avail= {this.state.avail}
 $avail = {this.state.$avail}
/>

父组件：

myChangeHandler(event) {
  console.log([event.target.name]); /* brandGuideline */
  this.setState({
    [event.target.name]: event.target.value
  })
};

此[event.target.name]=“BrandGuidence”（使用console.log）。同样，你需要把这个作为道具送给孩子。

将brandGuideline作为道具传递：

{/* Parent After step 1 & 2 */}
<Child 
  username = {this.state.username}
  myChangeHandler = {this.myChangeHandler}
  avail= {this.state.avail}
  $avail = {this.state.$avail}
  brandGuideline =  {this.state.brandGuideline}
/>

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      avail:'available',
      $avail:'non-available',
      brandGuideline:'',
    };
    this.myChangeHandler = this.myChangeHandler.bind(this);
  }

  myChangeHandler(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }render(){
    return(
      <div>
        <Child 
          username = {this.state.username}
          myChangeHandler = {this.myChangeHandler}
          avail= {this.state.avail}
          $avail = {this.state.$avail}
          brandGuideline =  {this.state.brandGuideline}
          />
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return (
      <div className="label">
        <label>
          username
        </label>
        <input
          type='text'
          name='username'
          value={this.props.username}
          onChange={this.props.myChangeHandler}
          />
        <h1>My username: {this.props.username}</h1>
        <div>
          <label>
            We have a Brand Guide
          </label>
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.$avail}
            onChange={this.props.myChangeHandler}
            />Yes
          <input 
            type='radio'
            name='brandGuideline'
            value={this.props.avail}
            onChange={this.props.myChangeHandler}
            /> No 
        </div>
        <h1>Guide is: {this.props.brandGuideline}</h1>
      </div>
    );
  }
};

ReactDOM.render(
  <Parent />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>