Добрый вечер.

Начинаю изучать реакцию. Я пытаюсь создать форму, которая может иметь персонализированный контент, но я пытаюсь вызвать метод в родительском классе формы, где я пытаюсь изменить переменную состояния, но он говорит: «Невозможно прочитать свойство 'test' of undefined».

Мой класс формы:

class Test extends React.Component {

    constructor (props) {
         super(props)
    }

    tmp(e) {
        this.props.functionTest(e);
    }

    render() {
        return(
            <div className={this.props.DivFormClass}>
                <div className={this.props.TitleClass}>
                    {this.props.Title}
                </div>
                <form className={this.props.FormClass} onSubmit={e => this.tmp(e)}>
                    {this.props.children}
                </form>
            </div>
        )
    }
}

Родительский класс:

class Formtest extends React.Component {
    constructor (props) {
        super(props)
        this.state = {
            test :"ok"
        }
    }

    FunctionTest (e) {
        e.preventDefault();
        console.log(this.state.test)
    }

    render() {
        return (
            <div>
                <Test DivFormClass="divtest" TitleClass="titletest" FormClass="test" Title="Test Form" functionTest={this.FunctionTest}>
                    <input name="email" type="email" required="required" className="error"/>
                    <button>OK</button>
                </Test>
            </div>
        )
    }
}

Что я делаю не так ?

0
romain hecht 8 Мар 2021 в 17:16

2 ответа

Лучший ответ

Преобразовать эту функцию в стрелочную функцию

FunctionTest  = (e) => {
    e.preventDefault();
    console.log(this.state.test)
}

Или используйте оператор bind, чтобы привязать значение this к классу, чтобы он не функционировал сам

0
Rajender Dandyal 8 Мар 2021 в 14:23

Вам нужно привязать this в конструкторе. Пожалуйста, прочтите эту ссылку для получения дополнительной информации.

constructor (props) {
        super(props)
        this.state = {
            test :"ok"
        }
        this.FunctionTest.bind(this)

    }
0
ali sasani 8 Мар 2021 в 14:21