Question

我正在创建一个注册表单，该表单将根据注册人员是从表单的第一个div中选择Post a project还是Work on a project来呈现不同的外观。

如何根据第一个div中选择的内容，有条件地渲染form-group后的每个div ？我正在使用钩子，并且发现大多数示例都是针对extends Component方法的。

我的表单：

const signUpForm = () => (
  <form onSubmit={clickSubmit}>
    <div className="form-group">
      <select onChange={handleChange("role")} class="form-control">
        <option selected>I want to...</option>
        <option>Post a project</option>
        <option>Work on a project</option>
      </select>
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("name")}
        type="text"
        placeholder="Name"
        className="form-control"
        value={name}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("email")}
        type="email"
        placeholder="Email"
        className="form-control"
        value={email}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("password")}
        type="password"
        placeholder="Password"
        className="form-control"
        value={password}
      />
    </div>

    <div className="form-group">
      <input
        onChange={handleChange("studying")}
        type="text"
        placeholder="I'm studying..."
        className="form-control"
        value={studying}
      />
    </div>

    <div>
      <div>{createInputs()}</div>
      <button
        className="btn btn-outline-primary btn-sm mb-3"
        onClick={addSkill}
        type="text"
      >
        Add more skills
      </button>
    </div>

    <button onClick={clickSubmit} className="btn btn-primary" type="submit">
      Sign Up
    </button>
  </form>
);

状态：

const Signup = () => {
  const [values, setValues] = useState({
    name: "",
    email: "",
    password: "",
    studying: "",
    skills: [""],
    error: "",
    success: "",
    role: ""
  });

  const { name, email, password, studying, skills, success, error, role } = values;

handleChange（）：

 const handleChange = name => event => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };

Answer 1

您应该首先将signUp分为两部分，然后根据状态中“角色”的值调用第二个函数。

这个想法是根据第一个输入的状态从第二个函数返回divs。

const signUpForm = () => (
  <form onSubmit={clickSubmit}>
    <div className="form-group">
      <select onChange={handleChange("role")} class="form-control">
        <option selected>I want to...</option>
        <option>Post a project</option>
        <option>Work on a project</option>
      </select>
    </div>

    {this.renderInput()}

    <button onClick={clickSubmit} className="btn btn-primary" type="submit">
      Sign Up
    </button>
  </form>
);

renderInput() {
    if (values.role === "post") {
        return (
            <div className="form-group">
                <input onChange={handleChange("name")} type="text" placeholder="Name" className="form-control" value={name} />
            </div>

            <div className="form-group">
                <input onChange={handleChange("email")} type="email" placeholder="Email" className="form-control" value={email} />
            </div>

            <div className="form-group">
                <input onChange={handleChange("password")} type="password" placeholder="Password" className="form-control" value={password} />
            </div>

            <div className="form-group">
                <input onChange={handleChange("studying")} type="text" placeholder="I'm studying..." className="form-control" value={studying} />
            </div>

            <div>
                <div>{createInputs()}</div>
                <button className="btn btn-outline-primary btn-sm mb-3" onClick={addSkill} type="text">
                    Add more skills
                </button>
            </div>
        );
    }
}

Answer 2

您要测试角色状态值是否为true / falsey，并在该值上呈现表单的其余部分。

const SignUpForm = () => (
  <form onSubmit={clickSubmit}>
    <div className="form-group">
      <select
        defaultValue='unselected' // set default value here
        onChange={handleChange("role")}
        className="form-control" // fix className here, class alone isn't correct in react
      >
        <option value='unselected'>I want to...</option>
        <option value='post'>Post a project</option>
        <option value='work'>Work on a project</option>
      </select>
    </div>

    {!!role && (
      <Fragment>
        <div className="form-group">
          <input
            onChange={handleChange("name")}
            type="text"
            placeholder="Name"
            className="form-control"
            value={name}
          />
        </div>

        <div className="form-group">
          <input
            onChange={handleChange("email")}
            type="email"
            placeholder="Email"
            className="form-control"
            value={email}
          />
        </div>

        <div className="form-group">
          <input
            onChange={handleChange("password")}
            type="password"
            placeholder="Password"
            className="form-control"
            value={password}
          />
        </div>

        <div className="form-group">
          <input
            onChange={handleChange("studying")}
            type="text"
            placeholder="I'm studying..."
            className="form-control"
            value={studying}
          />
        </div>

        <div>
          <div>{createInputs()}</div>
          <button
            className="btn btn-outline-primary btn-sm mb-3"
            onClick={addSkill}
            type="text"
          >
            Add more skills
          </button>
        </div>
      </Fragment>
    )}

    <button onClick={clickSubmit} className="btn btn-primary" type="submit">
      Sign Up
    </button>
  </form>
);

用钩子反应条件div

2 个答案: