在反应中向父组件添加单选按钮值

Question

父组件存储所有状态。

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

myChangeHandler(event) { this.setState({ [event.target.name]: event.target.value });

并且在“指南是”行中更改单选按钮的值时应 return 这是代码，如果我遗漏了什么请告诉我

// 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

您的问题与从 parent 到 child 的道具数据缺失有关。

喜欢写作：

value = {this.state.i_am_not_exist_prop};

1/2。第一个错误

之前

{/* 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}
/>

2/2。第二个错误

Parent分量：

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

这个[event.target.name] = “brandGuideline”（使用console.log）。同样，您需要将其作为道具发送到 child.

将 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}
/>

1 + 2 个工作片段

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>

Child VS Parent 做法

如果 myChangeHandler 函数具体与 child 形式相关并且无法以某种方式重用（就像你的情况一样） - 最好将函数放在他们的而不是将此函数作为 prop 从 parent.

发送

avail & $avail 状态可以是一个布尔值 available: true/false 的单位（对于 Conditional Rendering 更语义化和有用 & 更易于阅读）。

从这里开始：

在反应中向父组件添加单选按钮值

Adding a radio button value to parent component in react

javascript

reactjs

react-props

1/2。第一个错误

2/2。第二个错误

1 + 2 个工作片段