时间戳

首页 > 解决方案 > 如何在 ReactJS 中保存输入默认值

reactjs - 如何在 ReactJS 中保存输入默认值

问题描述

我正在做我的第一个项目，但我发现了另一个问题。我的教授告诉我，我的编辑表单在开始时不能为空，它必须存储默认值。这就是我所做的。可悲的是，我发现它有问题。怎么了？第一件事：*我的默认输入无法更改。第二：*即使我的默认值对我来说是可见的，在 POST 之后它也会发送 "" 作为值。

我已经尝试了很多东西，比如从 this.state.userResponse.map 设置值，但它当然失败了。甚至试图逃避 React 并将默认值保存到 LocalStorage 只是为了让它工作。


class EditProtege extends Component {
  state = {
    firstname: "",
    userResponse: []
  };

  getUserByID() {
    fetch(`http://localhost:9000/proteges/${utils.i}`)
      .then(res => res.json())
      .then(res => this.setState({ userResponse: res }))
      .catch(err => err);
  }

  handleNameChange = event => {
    this.setState({ firstname: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    axios
      .put(`http://localhost:9000/proteges/${utils.i}`, {
        firstname: this.state.firstname,
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      });

    window.location.reload();
  };


  componentDidMount() {
    this.getUserByID();
    //this.setDefaultValues();
  }

  render() {
    return (      
      <div className="creation-form">
        {this.state.userResponse.map(resp => (
        <div>
          <br />
          <rb.Form onSubmit={this.handleSubmit}>
            <rb.FormGroup>
              <rb.Row>
                <rb.Col md={12}>
                  <rb.FormControl
                    type="text"
                    name="firstname"
                    size="md"
                    onChange={this.handleNameChange}
                    placeholder="Name"
                    default={this.userResponse.proteges}
                    required
                  />
                </rb.Col>
            </rb.FormGroup>
            <rb.Button type="submit" variant="dark" size="lg" block>
               Zatwierdź edycję
            </rb.Button>
          </rb.FormGroup>
        </rb.Form>
      </div>
      ))}
    </div>
    );
  }
}

export default EditProtege;

就像我之前说过的，我想发布默认值并能够根据需要更改它。现在它不可触碰并发送空字符串。

更新：将默认值更改为默认值，似乎我可以再次编辑它，但仍然存在保存此数据的问题。

标签： reactjs

解决方案

我建议将您的状态的 firstName 设置为默认值，然后在您的 rb 输入组件上使用 value 属性并将其设置为 this.state.firstName ，同时仍然保持 onChange 就位并摆脱默认属性。

这样，每次更改字段的输入值时，都会有效地重置状态，并且还会更新输入字段的值。当您发送带有当前状态数据的发布请求时，它也应该是准确的。

推荐阅读