1

親コンポーネントから子コンポーネントにオブジェクトを渡しています。子コンポーネントには、親コンポーネントで次のように処理されるいくつかの入力フィールドがあります。

import React, { Component } from "react";
import Child from 'path';

class parent extends Component {
    constuctor(props){
        super(props);
        this.state = {
            obj :{
                //object
            }
        }
        this.handlerInput =  this.handlerInput.bind(this);
    }

    handlerInput(e){
        //logic to update state obj
    }
    render(){
        return(
            <div className="content">
                <Child changeHandle={this.handlerInput}  />
            </div>
        );
    };
}



export default parent;



import React, { Component } from "react";

class Child extends Component {
    render(){
        return(
            <div className="content">
                <input type="text" onChange={ this.props.changeHandle } name="xyz" />
            </div>
        );
    };
}



export default Child;

ここで、複数の場所で子コンポーネントを使用する必要がある場合、毎回親コンポーネントで changeHandle 関数を定義する必要があるとしますか?

child から親の状態を更新する提案はありますか?

4

1 に答える 1

1

あなたはそのようなことを試すことができます

import React, { Component } from "react";
import Child from "./Child";
class Parent extends Component {
    constructor(props){
        super(props);
    }
  state = {
      name: 'Parent',
  };

  changeHandle = e => {
    this.setState({ name: e.target.value });
  };

  render() {
    return (
      <div>
        <Child changeHandle={this.changeHandle} name={this.state.name}/>
      </div>
    );
  }
}

export default Parent;


import React, { Component } from "react";
class Child extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    name: "Child"
  };
  render() {
    return (
      <div className="content">
        <input
          type="text"
          onChange={this.props.changeHandle}
          name="xyz"
          value={this.props.name}
        />
      </div>
    );
  }
}

export default Child;
于 2019-05-29T12:22:26.723 に答える