Реагирует состояние ссылки на ноль - PullRequest
Новая
       10

Реагирует состояние ссылки на ноль

0 голосов
/ 30 марта 2020

Я хочу получить доступ к состоянию дочернего компонента с помощью ссылок, но состояние ссылки всегда равно нулю.

В моем приложении React у меня есть Editor (в основном это форма), которая манипулирует своими собственными состояниями, например, изменение значения, обновление. Редактор используется на нескольких страницах.

Editor.jsx 

    export default class Editor extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                value1: null,
                ... other values 
            };
         }

         onValue1Change = (e) => {
            this.setState({value1: e.target.value});
         }

         onSave = (e) => {
            // save values
         }

         render() {
             return (
                <div>
                    <input value={this.state.value1} onChange={this.onValue1Change}/>
                    ... other input fields
                    <button onClick={this.onSave}>Save</button>
                </div>
             )
         }
     }

Теперь есть RegisterForm, который охватывает все поля в редакторе. Я сделал небольшое изменение в Editor, чтобы скрыть кнопку Сохранить, чтобы я мог использовать ее в RegisterForm:

RegisterForm.jsx 

    export default class RegisterForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: null,
                firstname: null,
                lastname: null
            };
            this.Editor = React.createRef();
        }

        onSave = (e) => {
            let childState = this.Editor.current.state;
            // childState is ALWAYS null!
        }

        render() {
            return (
                <div>
                    <input value={this.state.email} onChange={this.onEmailChange}/>
                    <input value={this.state.firstname} onChange={this.onFirstnameChange}/>
                    <input value={this.state.lastname} onChange={this.onLastnameChange}/>
                    ...
                    <Editor ref={this.Editor} showSave={false}/>
                    ...
                    <button onClick={this.onSave}>Save</button>
                </div>
            )
        }
    }

Оказывается, this.Editor.current.state всегда равно нулю.

У меня два вопроса.

  1. Почему this.Editor.current.state равно нулю?

  2. Если я хочу использовать реквизит, как мне изменить свой код? Например, если я позволю RegisterForm передать реквизиты в Editor, я представлю что-то вроде этого:

Editor.jsx 

    export default class Editor extends React.Component {
         // same constructor
         onValue1Change = (e) => {
            this.setState({value1: e.target.value}, () => {
                if(this.props.onValue1Change) this.props.onValue1Change(e);
            });
         }
         // same render
     }

RegisterForm.jsx 

     export default class RegisterForm extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                email: null,
                firstname: null,
                lastname: null,
                value1: null,
            };
        }

        onValue1Change = (e) => {
            this.setState({value1: e.target.value});
        }

        render() {
            return (
                <div>
                    <Editor showSave={false} onValue1Change={this.onValue1Change}/>
                    ...
                </div>
            )
        }
    }

делает ли дочерний компонент визуализированным дважды? Любые предложения о том, как его улучшить?

1 Ответ

1 голос
/ 31 марта 2020

Вы передаете ссылку в качестве реквизита компоненту <Editor/>, но после этого ничего не делаете с ним.

Например: 

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Получаете реквизиты и реф через forwardRef() параметр обратного вызова, затем передать ссылку на дочерний узел.

Это называется переадресация ссылки

Я сделал песочницу с кодом для вам проверить это!

...