Reactjs 有没有办法清除表单输入并保持输入状态？（内的代码示例）

我有一个表单，它使用输入字段的当前状态在提交后在页面上显示值

问题是我不想在提交后访问这些字段

我已经尝试在提交后禁用表单，但这还不够。用户只需再次按submit，即可再次访问字段

export default class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      disabled: false,
      submitted: false
    };
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleFreezeClick = e => {
    this.setState({ disabled: !this.state.disabled });
  };

  handleSubmit = e => {
    const {
      firstname,
      lastname,
      disabled,
      submitted
    } = this.state;
    this.setState({ submitted: true });
    e.preventDefault();
  };

  render() {
    const {
      firstname,
      lastname,
      disabled,
      submitted
    } = this.state;
    return (
        <section className="section">
          <div className="container">
            <div className="content">
              <h1>Form</h1>
              <form
                name="formtest"
                method="post"
                action="www.google.com/"
                disabled={this.state.disabled}
                onSubmit={this.handleSubmit}
              >
                <div className="field">
                  <label className="label" htmlFor="firstname">
                    First Name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="firstname"
                      value={this.state.firstname}
                      onChange={this.handleChange}
                      defaultValue="Doctor"
                      disabled={this.state.disabled}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <label className="label" htmlFor="lastname">
                    Last Name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="lastname"
                      value={this.state.lastname}
                      onChange={this.handleChange}
                      defaultValue="Tenma"
                      disabled={this.state.disabled}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <button
                    onClick={this.handleFreezeClick.bind(this)}
                    className="btn"
                    type="submit"
                  >
                    Submit
                  </button>
                </div>
              </form>
            </div>
          </div>
        </section>

        <section>
          <div className="container">
            <div className="content">
              {submitted ? (
                <p>{`Hello ${firstname} ${lastname}`}</p>
              ) : null}
            </div>
          </div>
        </section>

导出默认类Contact.Component{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
残疾人士:错,，
提交：假
};
}
handleChange=e=>{
this.setState（{[e.target.name]：e.target.value}）；
};
handleFreezeClick=e=>{
this.setState（{disabled:！this.state.disabled}）；
};
handleSubmit=e=>{
常数{
名字，
姓，
残废
提交
}=本州；
this.setState（{submitted:true}）；
e、 预防默认值（）；
};
render（）{
常数{
名字，
姓，
残废
提交
}=本州；
返回(
形式
名字
姓
提交
{提交(
{`Hello${firstname}${lastname}`}

)：null}

---

理想的结果应该是在提交时清除所有输入字段，并且在输入字段被清除后仍然在页面上显示结果。

您还必须禁用

提交

按钮

  <button
    onClick={this.handleFreezeClick}
    className="btn"
    type="submit"
    disabled={submitted} // add it in your code
  >
    Submit
  </button>

提交

您还必须禁用

提交

按钮

  <button
    onClick={this.handleFreezeClick}
    className="btn"
    type="submit"
    disabled={submitted} // add it in your code
  >
    Submit
  </button>

提交

我想你可以这样改变你的手牌

    handleSubmit = e => {
    e.preventDefault();
    const {
      firstname,
      lastname,
      disabled,
      submitted,
    } = this.state;
    this.setState({ submitted: true, disabled: true });
};

还有按钮标签

<button disabled={this.state.disabled} className="btn">Submit</button>

提交

我想你可以这样改变你的手牌

    handleSubmit = e => {
    e.preventDefault();
    const {
      firstname,
      lastname,
      disabled,
      submitted,
    } = this.state;
    this.setState({ submitted: true, disabled: true });
};

还有按钮标签

<button disabled={this.state.disabled} className="btn">Submit</button>

提交

我对您的代码片段做了一些更改-

1） 在此.state中添加全名属性

2） 在handleSubmit函数中，当您设置按钮提交的状态时，还可以设置fullName、firstName和lastName的状态，如下所示

const fullName = firstname + ' ' + lastname;
this.setState({ submitted: true, fullName: firstname + ' ' + lastname, firstname: '',  
lastname: '' });

这将清除您的输入字段，并且我们将输入值存储到字段名fullName

3） 在中更改绑定。而不是绑定firstname和lastname。使用fullName属性绑定它。如下所示

{提交( {

Hello${this.state.fullName}

}

)：null}

---

希望这能解决您的问题。

我对您的代码片段做了一些更改-

1） 在此.state中添加全名属性

2） 在handleSubmit函数中，当您设置按钮提交的状态时，还可以设置fullName、firstName和lastName的状态，如下所示

const fullName = firstname + ' ' + lastname;
this.setState({ submitted: true, fullName: firstname + ' ' + lastname, firstname: '',  
lastname: '' });

这将清除您的输入字段，并且我们将输入值存储到字段名fullName

3） 在中更改绑定。而不是绑定firstname和lastname。使用fullName属性绑定它。如下所示

{提交( {

Hello${this.state.fullName}

}

)：null}

---

---

希望这能解决您的问题。

您不想禁用按钮而不是输入字段有什么原因吗？另外，您不需要在按钮回调中绑定

handleFreezeClick

方法，因为您将其定义为箭头函数。没有真正的原因。我最初的决定是禁用但@Clue Mediator解决了我的问题。我不确定我是否需要它，但我最初的请求是否可能？谢谢。如果你想保留这些值（出于某种目的）然后清除输入我认为您可以将它们保存到另一个状态值，并清除保留输入值的原始状态。您的真实意图在这里很重要。明白，非常感谢。您不想禁用按钮而不是输入字段是有原因的吗？另外，您不需要绑定

handleFreezeClick

me按钮回调中的方法，因为您将其定义为箭头函数。没有真正的原因。我最初的决定是禁用，但@Clue Mediator解决了我的问题。我不确定我是否需要它，但我最初的请求是否可能？谢谢。如果您想保留这些值（出于某种目的）然后清除输入我认为你可以将它们保存到另一个状态值，并清除保留输入值的原始状态。你的真实意图在这里很重要。理解，非常感谢。虽然我最初的问题可能问了一些看似不可能的问题，但这确实解决了我的问题。谢谢。现在，是否有可能清除我的输入值输入并保持该输入的状态？为此，必须使用不同的变量来显示。谢谢，假设我有另一个按钮来清除输入值。我有一个handleClear函数，看起来像这样``handleClear=e=>{this.setState（{firstname:''，lastname:''，}）；}“``该按钮成功地清除了输入值，但一旦清除了字段，它们将保持锁定状态，因为“提交”按钮已经禁用了这些字段。如何解锁这些字段？谢谢！有些地方需要提供按钮以使其启用。抱歉，我没有空间输入按钮代码，但它确实存在。

Clear

虽然我最初的问题可能问了一些看似不可能的问题，但这确实解决了我的问题。谢谢。现在，是我吗