1

Мне в child компоненте по методу onClick надо модифицировать массив, который будет передаваться в родитель, а из родителя уже в другой child компонент.

1 ответ 1

1

Правильно, с точки зрения реакта это сделать следующим образом: массив хранить как состояние в родительском объекте, в родительском же объекте сделать функцию, которая модифицирует состояние, первому чайлду в качестве параметра передавать функцию, а второму значение массива.

Codepen

<div id="root">You have no JS enabled</div>
class FirstChild extends React.Component{
  render(){
    var {needArr} = this.props;
    var outList = needArr.map( (comp,key) => {
      return <li key={key}> {comp} </li>
    });
    return (<ul> {outList} </ul>)

  }
}

class SecondChild extends React.Component {

  render (){
    return [(<button onClick={() => {this.props.actions.buttonClick("aaa")}}>add me</button>),
            (<button onClick={() => this.props.actions.actionDva()}>RemoveFirst</button>),
           (<button onClick={() => this.props.actions.actionTri()}>RemoveLast</button>),
           (<button onClick={() => this.props.actions.actionFour("bbb")}>AddFirst</button>)
           ];
        };
}


class MainComp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      myArr:["A", "B", "C", "D"]
    }
  }

  modifyArray = (newComp) => {
    var {myArr} = this.state;
    myArr.push(newComp);
    this.setState({myArr});
  }

  removeFirst = () => {
    var {myArr} = this.state;
    myArr.shift();
    this.setState({myArr});
  }

  removeLast = () => {
    var {myArr} = this.state;
    myArr.pop();
    this.setState({myArr});
  }

  addFirst = (val) => {
    var {myArr} = this.state;
    myArr.unshift(val);
    this.setState({myArr});
  }

  render(){
    var {myArr} = this.state;
    return (<div>
        <FirstChild needArr={myArr}/>
        <SecondChild actions={{
            buttonClick:this.modifyArray,
            actionDva:this.removeFirst,
            actionTri:this.removeLast,
            actionFour:this.addFirst
          }}/>
        </div>)
  }
}


ReactDOM.render(
          <MainComp/>,
          document.getElementById('root')
        );
4
  • Спасибо, а как передавать 4 функции, каждая из который модифицирует массив в родителе? 13 дек 2018 в 18:23
  • Поправил на 4 эвента
    – Serge Kior
    14 дек 2018 в 3:15
  • спасибо огромное!)) 14 дек 2018 в 4:44
  • Если вас все устроило и вас не затруднит - примите мой ответ как помогший вам. Удачи
    – Serge Kior
    14 дек 2018 в 5:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.