试图从表单的事件处理程序 onSubmit 返回 jsx答案

【问题标题】：Trying to return jsx from an event handler onSubmit of the form试图从表单的事件处理程序 onSubmit 返回 jsx
【发布时间】：2019-10-03 10:21:40
【问题描述】：

我正在尝试获取表单的一些 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>
    );
}

}

分支机构 CSE 其他操作系统 - 计算机图形和多媒体系统 - 编译器设计 - 软件工程 - 计算机网络 - 操作系统实验室 - 编译器实验室 - 网络实验室 - 专业培训 - 我 - 提交你的 gpa 是：6.7

【问题讨论】：

标签： reactjs forms jsx onsubmit

【解决方案1】：

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>
    );
}

【讨论】：