尝试从表单的事件处理程序 onSubmit return jsx

Question

我正在尝试获取表单的一些 jsx onSubmit...我在其中调用了事件处理程序 initialState

我有计算，它也在记录时显示在控制台中，但无法 return jsx 并在屏幕上显示它

class 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 其他操作系统 - 计算机图形和多媒体系统 - 编译器设计 - 软件工程 - 计算机网络 - 操作系统实验室 - 编译器实验室 - 网络实验室 - 专业培训 - 我 - 提交你的平均绩点是：6.7

Answer 1

onSubmit 调用的操作不应 return 任何 JSX。相反，它应该更新组件 state 中的一些属性，然后你的 JSX 应该 re-render 基于 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>
    );
}

尝试从表单的事件处理程序 onSubmit return jsx

Trying to return jsx from an event handler onSubmit of the form

forms

onsubmit

jsx

reactjs