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

Question

父组件存储所有状态。

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

myChangeHandler(事件) { 这个.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

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

喜欢写作：

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。第二个错误

父组件：

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

这个[event.target.name] = "brandGuideline"（使用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}
/>

1 + 2 工作 sn-p

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>

孩子与父母的做法

如果myChangeHandler 函数与子表单相关特别 并且不能以某种方式重用（就像您的情况一样） - 最好将函数放在他们的而不是从prop 发送此函数父母。

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

从这里开始：

• https://reactjs.org/docs/forms.html
• https://reactjs.org/docs/components-and-props.html

Answer 2

你是否错过了从孩子到父母获取传递的事件。

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