ReactJS：通过索引从不同组件中的数组更改文本

Question

对不起，如果标题令人困惑。我不太确定如何措辞。

在我的 index.js 上有一个数组

let appts = [
{
    "firstName": "Michael",
    "lastName": "Scofield",
    "dob": "06-2-1972",
    "sex": "Male",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:00 AM"
},
{
    "firstName": "Lincoln",
    "lastName": "Burrows",
    "dob": "02-17-1970",
    "sex": "Male",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:20 AM"
},
{
    "firstName": "Sara",
    "lastName": "Tancredi",
    "dob": "06-1-1977",
    "sex": "Female",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at pulvinar lacus, nec consequat felis.",
    "time": "10:40 AM"
}

]

在我的侧边栏组件中，我将数组输出到一个列表项，各种按钮

let filteredAppts = this.props.appts.filter(
        (appt) => {
            let name = appt.firstName + ' ' + appt.lastName;
            return name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
        }
    );


<div className="appt-list">
    <ul>
        {filteredAppts.map((appt, index)=> {
            return <Appt appt={appt} key={index} index={index}/>
        })}
    </ul>
</div>

然后在我的 Appt 组件中，我输出列表项本身，并有一个函数返回您单击的项目的索引（我正在玩一些东西试图让它工作）

var selected = 0;


handler(index, event) {
    selected = index;
    console.log(selected);
}

render() {
    return (
        <li onClick={this.handler.bind(this, this.props.index)}>
            <div className="appt-info">
                <h4>{this.props.appt.lastName + ', ' + this.props.appt.firstName}</h4>
                <span>{this.props.appt.time}</span>
            </div>
            <div className="appt-excerpt">  
                <p>{this.props.appt.summary}</p>
            </div>
        </li>
    )
}

然后在另一个组件中，我是您选择的约会信息。

<header className="appt-info">
                <h2>{this.props.appts[0].lastName + ', ' + this.props.appts[0].firstName}</h2>

我想将this.props.appts[0] 替换为被点击项目的索引。但我不确定如何将 selected 变量传递给组件。

我的应用看起来像这样

var selection = 2;

class App extends React.Component {
render() {
    return (
        <div className="appContainer">
            <Nav />
            <div className="appContent">
                <Sidebar appts={this.props.appts}/>
                <Patient appts={this.props.appts} selection={this.props.selection}/>
            </div>
        </div>
    );
}


render(<App appts={appts} selection={selection}/>, document.getElementById('app'));

任何帮助将不胜感激，谢谢！

Answer 1

您需要将您的选择从 Sidebar 冒泡回到父状态 (App)，然后将其传递回 Sidebar 的兄弟 Patient

我们可以通过传递对父级的handleApptSelection 的引用来做到这一点，当Sidebar 更改时将调用它。您将通过修改Sidebar 的handler 方法来做到这一点

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      selectedAppt: appts[0]
    }
  }

  handleApptSelection(apptRec) {
    this.setState({selectedAppt: apptRec});  
  }

  render() {
    const {selectedAppt} = this.state;
    return (
      <div className="appContainer">
        <Nav />
        <div className="appContent">
          <Sidebar appts={this.props.appts} onSelect={this.handleApptSelection.bind(this)}/>
          <Patient appts={this.props.appts} selection={selectedAppt}/>
        </div>
      </div>
    );
}

侧边栏的处理方法：

handler(index) {
  const {appts, onSelect} = this.props;
  selected = index;
  console.log(selected);
  onSelect(appts[index]);  // this is actually App's handleApptSelection method!
}