代码之家 › 专栏 › 技术社区 › Dagger

如何在React中将输入值传递给新的div?

reactjs

Dagger · 技术社区 · 3 年前

我正在开发一个CV生成器,我不知道如何正确地附加 school 和 field of study 值添加到React中的一个新div。

使用 onSubmit 函数我可以在填写并单击“保存”后获得值,但我不知道该从哪里开始。

使现代化

我想做的是从输入中获取值,并在显示这些值的表单上方创建一个新的div。例如,我想要 School 要显示的值

学校:大学

同样的道理 Field of Study 。

研究领域:随便

我知道如何在vanillaJS中做到这一点,但要获取值并将其附加到DOM中,但在React中似乎不起作用。

class Education extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit = (e) => {
    e.preventDefault();
    const schoolForm = document.getElementById("school-form").value;
    const studyForm = document.getElementById("study-form").value;
  };

  render() {
    return (
      <>
        <h1 className="title">Education</h1>
        <div id="content">
            <form>
              <label for="school">School</label>
              <input
                id="school-form"
                className="form-row"
                type="text"
                name="school"
              />
              <label for="study">Field of Study</label>
              <input
                id="study-form"
                className="form-row"
                type="text"
                name="study"
              />
              <button onClick={this.onSubmit} className="save">
                Save
              </button>
              <button className="cancel">Cancel</button>
            </form>
          )}
        </div>
      </>
    );
  }
}

export default Education;

0 回复 | 直到 3 年前

Sky 3 年前

你应该使用 state 为了保存值,然后在用户提交时显示它。

import React from "react";
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { scool: "", study: "", showOutput: false };
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit = (e) => {
    e.preventDefault();
    this.setState({
      showOutput: true
    });
  };

  setStudy = (value) => {
    this.setState({
      study: value
    });
  };

  setSchool = (value) => {
    this.setState({
      school: value
    });
  };

  render() {
    return (
      <>
        <h1 className="title">Education</h1>
        <div id="content">
          {this.state.showOutput && (
            <>
              <div>{`school: ${this.state.school}`}</div>
              <div>{`study: ${this.state.study}`}</div>
            </>
          )}
          <form>
            <label for="school">School</label>
            <input
              id="school-form"
              className="form-row"
              type="text"
              name="school"
              onChange={(e) => this.setSchool(e.target.value)}
            />
            <label for="study">Field of Study</label>
            <input
              id="study-form"
              className="form-row"
              type="text"
              name="study"
              onChange={(e) => this.setStudy(e.target.value)}
            />
            <button onClick={this.onSubmit} className="save">
              Save
            </button>
            <button className="cancel">Cancel</button>
          </form>
          )
        </div>
      </>
    );
  }
}

export default App;

我还添加了两个函数来设置状态和 condition render 基于showOutput。

Jash1395 3 年前

你 不要将内容附加到DOM 反应就像香草里的一样。你想 有条件地渲染元素 。

制作一个新元素来显示数据,并仅在拥有数据的情况下进行渲染。(条件呈现使用&&运算符完成)

{this.state.schoolForm && this.state.studyform && <div>
    <p>School: {this.state.schoolForm}</p>
    <p>Field of Study: {this.state.studyForm}</p>
</div>}

学校形式和学习形式应该 组件状态变量 。如果onSubmit中只有它们作为变量,那么函数调用结束后数据将丢失。onSubmit函数应该只设置状态,然后访问状态变量以使用数据。

请勿使用 document.getElementById 。您不希望将“document”对象与react一起使用(几乎从不)。

您可以使用onSubmit自动传递的事件对象直接访问元素的值。

handleSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.school.value)
    console.log(event.target.study.value)
}