Question

我正在列出学生姓名和他们的身份证明。只要要呈现列表元素，Parent类就会调用Child类。

export default class Parent extends Component {    
  render() {
    return (
      <div>
        <div>
          <ul>{this.props.studentData.map(item => {
            return(
            <div><Child key={item.id} {...item} /></div>);
          })}
          </ul>
          <button>Submit</button>
        </div>
      </div>
    );
  }
}

export default class Child extends Component {
  render() {
    let {name}=this.props;
    return (
      <li><input type="checkbox"/>{name}</li>
    );
  }
}

我正在尝试在列表下面放置一个提交按钮，该按钮返回已检查学生姓名的结果，一个或多个。我不明白的是如何将学生姓名的值从Child组件返回到Parent，一直到层次结构的顶部并存储在某种变量中。有没有办法将值返回到父组件，即进行调用的组件？

Answer 1

您可以向Child发送回调函数，该函数会在检查或取消选中时发出通知。

const Child = ({ id, name, onChange }) => 
  <li>
    <input
      type="checkbox"
      onChange={(event) => onChange(id, event.target.checked) }
    />
    {name}
  </li>

class Parent extends React.Component {
  constructor() {
    super()

    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(id, checked) {
    console.log(`student ${id} is ${checked ? 'checked' : 'unchecked'}`)
  }

  render() {
    return (
      <div>
        <ul>
          {this.props.studentData.map(item =>
            <Child key={item.id} {...item} onChange={this.handleChange} />
          )}
        </ul>
      </div>
    )
  }
}

const studentData = [
  { id: 1, name: 'Student 1' },
  { id: 2, name: 'Student 2' },
  { id: 3, name: 'Student 3' },
]


ReactDOM.render(
  <Parent studentData={studentData} />,
  document.getElementById('root')
)

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

使用React将选中的值从Child返回到Parent和Grandparent组件

1 个答案: