Доступ к состоянию в родительском классе из дочернего класса - PullRequest
Новая
       6

Доступ к состоянию в родительском классе из дочернего класса

0 голосов
/ 09 апреля 2020

Я ценю предыдущую помощь из этого списка. Вот что я хочу сделать. Набор каскадных классов, которые взаимодействуют с сервером, используя get или post и получая ответ в JSON. В прошлом я делал это успешно, используя HTML5, javascript и JQuery. Я хотел бы, чтобы новый код использовал React. Я прочитал ряд статей, документирующих компоненты, реквизиты и классы. Я еще не совсем понял. Я считаю, что то, что я пытался сделать, близко, но все же неправильно. Бабель дает мне синтаксическую ошибку. См. Ошибочный код: 

class NameForm extends React.Component {
                      constructor(props) {
                        super(props);
                        this.state = {
                          value: ''
                        };
                        this.handleChange = this.handleChange.bind(this);
                        this.handleSubmit = this.handleSubmit.bind(this);
                      }

                      handleChange(event) {
                        const regexpr = /^[0-9\b]+$/;
                        if(event.target.value === '' || regexpr.test(event.target.value)){
                            this.setState({
                            value: event.target.value
                            });
                        }
                      }

                      handleSubmit(event) {
                        alert('A name was submitted: ' + this.state.value);
                        const {theName} = this.state.value;
                        return <NameProcess {"theName"}/>;  /* FAIL ! */
                      }

                      render() {
                        return /*#__PURE__*/React.createElement("form", {
                          onSubmit: this.handleSubmit
                        }, /*#__PURE__*/React.createElement("label", null, "Name:", 
/*#__PURE__*/React.createElement("input", {
                          type: "text",
                          value: this.state.value,
                          onChange: this.handleChange
                        })), /*#__PURE__*/React.createElement("input", {
                          type: "submit",
                          value: "Submit"
                        }));
                  }
                }

NameProcess будет именем дочернего класса. Что я делаю не так, как новичок?

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

Это сработало. 

class NameForm extends React.Component {  /*1*/
                      constructor(props) { /*2*/
                        super(props);
                        this.state = { /*3*/
                          value: '',
                          submitted: false
                        }; /*3*/
                        this.handleChange = this.handleChange.bind(this);
                        this.handleSubmit = this.handleSubmit.bind(this);
                      } /*2*/

                      handleChange(event) { /*2 */
                        const regexpr = /^[0-9\b]+$/;

                        if (event.target.value === '' || 
regexpr.test(event.target.value)) { /* 3 */
                          this.setState({ /* 4 */
                            value: event.target.value
                          }); /* 4 */
                        } /* 3 */
                      } /* 2 */

                      handleSubmit(event) { /* 2 */
                        event.preventDefault();
                        const { /* 3 */
                          value
                        } = this.state; /* 3 */
                        alert('A name was submitted: ' + value);
                        this.setState({ /* 3 */
                          submitted: true
                        }); /* 3 */
                      } /* 2 */

                      render() { /* 2 */
                                return this.state.submitted ? 
/*#__PURE__*/React.createElement(NameProcess, { /* 3 */
                                  value: this.state.value
                                }) : 
                                     /*#__PURE__*/React.createElement("form", { /* 3 */ /* 3 */ 
                                       onSubmit: this.handleSubmit
                                }, 
                                /*#__PURE__*/React.createElement("label", null, "Name:"), /*#__PURE__*/React.createElement("input", { /* 3 */ /* 3 */ 
                                  type: "text",
                                  value: this.state.value,
                                  onChange: this.handleChange
                                }), 
                                /*#__PURE__*/React.createElement("input", { /* 3 */ /* 3 */ 
                                  type: "submit",
                                  value: "Submit"
                                })); /* 3 */ 

                              } /* 2 */
                      } /* 1 */

                      class NameProcess extends React.Component {  /*1*/
                          constructor(props) { /*2*/
                            super(props);
                          } /*2*/
                          render(){ /* 2 */
                                  return 'blah!';
                              }  /* 2 */
                      } /* 1 */
0 голосов
/ 09 апреля 2020

Вы должны передать значение в указанную c опору, которую будет искать дочерний компонент, NameProcess. Например, return <NameProcess value={theName} />;, а затем получить доступ к нему в дочернем компоненте через this.props.value. Однако const {theName} = this.state.value вернет undefined, если value не является объектом, обладающим свойством theName. Вы, вероятно, хотите вместо этого сделать const { value } = this.state.

Но я также не уверен, почему вы возвращаете этот компонент из функции handleSubmit. Вместо этого вы можете подождать отправки, пока не появится компонент, и добавить его в свое состояние, чтобы пометить при отправке формы:

this.state = { value: '', submitted: false };

и вашей функции handleSubmit для обновления значения до true: 

handleSubmit(event) {
    event.preventDefault(); // to prevent default action taken on form submit
    alert('A name was submitted: ' + this.state.value);
    this.setState({ submitted: true });
}

и вашей функции рендеринга для отображения дочернего компонента после отправки:

{this.state.submitted && return <NameProcess value={this.state.theName} />}

Как упомянул @Yossi, вы можете очистить вашу render функцию с помощью JSX, сделать весь файл, собрать все эти предложения вместе, что-то вроде этого: 

class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: '',
            submitted: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        const regexpr = /^[0-9\b]+$/;
        if(event.target.value === '' || regexpr.test(event.target.value)){
            this.setState({
                value: event.target.value
            });
        }
    }

    handleSubmit(event) {
        event.preventDefault();
        const { value } = this.state;
        alert('A name was submitted: ' + value);
        this.setState({ submitted: true });
    }

    render() {
        const { value, submitted } = this.state;
        return (
            {submitted ? <NameProcess value={value} /> : (
                <form onSubmit={this.handleSubmit}>
                    <label>Name:</label>
                    <input type="text" value={value} onChange={this.handleChange} />
                    <input type="submit" value="Submit" />
                </form>
            )}
        );
    }
}
...