Попытка вернуть jsx из обработчика события onSubmit в форме - PullRequest
Новая
       24

Попытка вернуть jsx из обработчика события onSubmit в форме

0 голосов
/ 16 мая 2019

Я пытаюсь получить jsx onSubmit в форме ... где я вызвал обработчик события initialState

У меня есть вычисление, и оно также отображается в консоли во время регистрации, но не может вернуть jsx и показать его на экране

класс RenderSub расширяет React.Component {

constructor(props) {
    super(props);
    this.state = {
        marks: [{mark: ''}]
    }
}   

initialState = e => {
    e.preventDefault();
    // e.target.reset();
    let totalCreditScored = 0;
    let totalCredits = 0;
    let credit = this.props.lists.credits[this.props.lists.sem];
    for(let i = 0; i < this.state.marks.length; i++) {
        let x = this.state.marks[i].mark / 10;
        if(Number.isInteger(x)) {
            x = x + 1;
        } else {
            x = Math.ceil(x);
        }
        totalCreditScored = totalCreditScored + (x * credit[i]);
        totalCredits = totalCredits + 10 * credit[i];
    }
    let gpa = ((totalCreditScored / totalCredits) * 10).toFixed(2);
    this.setState({marks: [{mark: ''}]});
    console.log(gpa);
    return (
        <div>
            <h3>Your gpa is: {gpa}</h3>
        </div>
    );
}

render() {

    if(this.props.lists.sem === '') {
        console.log("hello");
        return <div></div>;

    }

    return (
        <div>
            <form onSubmit={this.initialState}>
                {this.renderedLists()}
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}

}

Филиал КСЭ Другое Операционная система - Компьютерная графика и мультимедийные системы - Дизайн компилятора - Разработка программного обеспечения - Компьютерные сети - Лаборатория операционной системы - Compiler Lab - Сетевая лаборатория - Профессиональная подготовка - я - Отправить Ваш gpa: 6,7

1 Ответ

3 голосов
/ 16 мая 2019

Действие, вызываемое onSubmit, не должно возвращать JSX.Вместо этого он должен обновить некоторые свойства в state вашего компонента, а затем ваш JSX должен повторно выполнить рендеринг на основе этих изменений в state

Что-то вроде этого: 

constructor(props) {
    super(props);
    this.state = {
        marks: [{mark: ''}]
    }
}   

initialState = e => {
    e.preventDefault();
    // e.target.reset();
    let totalCreditScored = 0;
    let totalCredits = 0;
    let credit = this.props.lists.credits[this.props.lists.sem];
    for(let i = 0; i < this.state.marks.length; i++) {
        let x = this.state.marks[i].mark / 10;
        if(Number.isInteger(x)) {
            x = x + 1;
        } else {
            x = Math.ceil(x);
        }
        totalCreditScored = totalCreditScored + (x * credit[i]);
        totalCredits = totalCredits + 10 * credit[i];
    }
    let gpa = ((totalCreditScored / totalCredits) * 10).toFixed(2);
    this.setState({marks: [{mark: ''}], gpa});
    console.log(gpa);
}

render() {

    if(this.props.lists.sem === '') {
        console.log("hello");
        return <div></div>;

    }

    if(this.state.gpa) {
      return (
        <div>
          <h3>Your gpa is: {gpa}</h3>
        </div>
      )
    }

    return (
        <div>
            <form onSubmit={this.initialState}>
                {this.renderedLists()}
                <button type="submit">Submit</button>
            </form>
        </div>
    );
}
...