прохождение состояния дочернего компонента - PullRequest
Новая
       11

прохождение состояния дочернего компонента

0 голосов
/ 12 сентября 2018

Итак, у меня есть компонент "itemSelection", и внутри него я отображаю через API-ответ, подобный этому 

<div className="row">
     {this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>

Здесь состояние компонента "Item" 

constructor(props){
        super(props);
        this.state = {
          visible: false,
          selected: false,
        }
    }

Какможно передать состояние компонента "Item" компоненту "itemSelection"?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Как по мне, если я понял ваш вопрос, вы хотите вызвать состояние дочернего компонента для родительского компонента. 

//Child.js

import s from './Child.css';

class Child extends Component {
 getAlert() {
    alert('clicked');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

export default withStyles(s)(Child);

//Parent.js

class Parent extends Component {
 render() {

  onClick() {
    this.refs.child.getAlert()
  }

  return (
    <div>
      <Child ref="child" />
      <button onClick={this.onClick.bind(this)}>Click</button>
    </div>
  );
 }
}

Также вы можете получить код ссылки по ссылке: https://github.com/kriasoft/react-starter-kit/issues/909

Это немного сложно, но, может быть, это поможет вам решить вашу проблему. 

//Parent.js
class Parent extends Component {
    component(props) {
        super(props)

        this.state = {
            test: 'abc'
        }
    }

    ParentFunction = (value) => {
        this.state.test = value;
        this.setState(this.state);
    }

    render() {

        return (
            <div>
                <Child
                    test={this.state.test}
                    ParentFunction={this.ParentFunction}
                />
            </div>
        );
    }
}


//Child.js

import s from './Child.css';

class Child extends Component {
    component(props) {
        super(props)

        this.state = {
            test: props.test
        }
    }

    handleChange = () => {
        this.state.test = event.target.value;
        this.setState(this.state);
        this.handleOnSave()
    }

    handleOnSave = () => {
        this.props.ParentFunction(this.state.test);
    }

    render() {
        return (
            <div> 
                <input type="text" onChange={this.handleChange} />
            </div>
        );
    }
}

export default withStyles(s)(Child);
0 голосов
/ 12 сентября 2018

Отправка данных обратно в ваш родительский компонент должна выполняться с помощью реквизита.Довольно распространенный вопрос, см. этот пост для длинного ответа.

...