反応：小道具を機能コンポーネントに渡す

小道具と機能部品について一見取るに足らない質問があります。基本的に、ユーザーがボタンをクリックするとトリガーされる状態変更時にモーダルコンポーネントをレンダリングするコンテナーコンポーネントがあります。モーダルは、コンテナーコンポーネント内にある関数に接続する必要があるいくつかの入力フィールドを格納するステートレス機能コンポーネントです。

私の質問：ユーザーがステートレスモーダルコンポーネント内のフォームフィールドを操作しているときに、親コンポーネント内にある関数を使用して状態を変更するにはどうすればよいですか？小道具を間違って受け渡していますか？前もって感謝します。

コンテナ

_export default class LookupForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showModal: false
        };
    }
    render() {
        let close = () => this.setState({ showModal: false });

        return (
            ... // other JSX syntax
            <CreateProfile fields={this.props} show={this.state.showModal} onHide={close} />
        );
    }

    firstNameChange(e) {
      Actions.firstNameChange(e.target.value);
    }
};
_

機能（モーダル）コンポーネント

_const CreateProfile = ({ fields }) => {
  console.log(fields);
  return (
      ... // other JSX syntax

      <Modal.Body>
        <Panel>
          <div className="entry-form">
            <FormGroup>
              <ControlLabel>First Name</ControlLabel>
              <FormControl type="text"
                onChange={fields.firstNameChange} placeholder="Jane"
                />
            </FormGroup>
  );
};
_

例：モーダルコンポーネント内から_this.firstNameChange_を呼び出したいとします。機能コンポーネントに小道具を渡す「分解」構文は、少し混乱しているようです。つまり：

const SomeComponent = ({ someProps }) = > { // ... };

javascriptreactjscomponents

2016/10/10Jose

ソースコンポーネントでこれを行うだけです

 <MyDocument selectedQuestionData = {this.state.selectedQuestionAnswer} />

次に、宛先コンポーネントでこれを行います

const MyDocument = (props) => (
  console.log(props.selectedQuestionData)
);

2020/02/08Krishna Kumar Jangid