Question

import React, { Component } from "react";
import myPhone from "../service/checkPhone.js";
import {usersParam} from'../variable.js';

class FormForUserChange extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
      age: "",
      gender: "",
      phone: "",
      address: "",
      display: "none"
    };
  }
  
  componentWillMount = () => {
    this.setState({ name: this.props.userToChange.name });
    this.setState({ age: this.props.userToChange.age });
    this.setState({ gender: this.props.userToChange.gender });
    this.setState({ phone: this.props.userToChange.phone });
    this.setState({ address: this.props.userToChange.address });
  };

  _makeListFormData=(usersParam)=>{
    return usersParam.map(each => {
      return (
        <input
              className="form-control"
              type="text"
              // defaultValue={this.state.{each}}
              placeholder={each}
              ref={input => (this.each = input)}
            />
      );
    });
  }
  _handleChange = event => {
    this.setState({ gender: event.target.value });
  };
  _handleSubmit = event => {
    event.preventDefault();
    if (
      this.name.value &&
      this.address.value &&
      this.phone.value &&
      this.age.value &&
      myPhone(this.phone.value)
    ) {
      const changedUser = {
        name: this.name.value,
        age: this.age.value,
        gender: this.state.gender,
        phone: this.phone.value,
        address: this.address.value,
        id: this.props.userToChange.ident
      };
      this.props.saveChangedUser(changedUser, this.props.userToChange.hash);
    } else {
      this.setState({ display: "block" });
    }
  };

  render() {
    let form;
    let btnText;
    const styles = {
      display: this.state.display
    };
    const inputsInForm=this._makeListFormData(usersParam);
    if (this.props.openModal) {
      form = (
        <div className="shadow p-3 mb-5 bg-white rounded" id="form">
          <form
            className="form-control-file. form-container"
            onSubmit={this._handleSubmit.bind(this)}
          >
            {inputsInForm}
            <button className="btn btn-primary" type="submit">
              Save changes
            </button>
          </form>
          <span id="form-fill-error" style={styles}>
            please fill out all fields correct
          </span>
        </div>
      );
    } else {
      form = "";
    }
    return (
      <div>
        <button
          className="btn btn-primary"
          id="add-user-btn"
          disabled="disabled"
        >
          {btnText}
        </button>
        {form}
      </div>
    );
  }
}

export default FormForUserChange;

我有一个数组，可从中构建表单（_makeListFormData）的输入。在短语持有人中，我必须输入来自状态的信息（来自道具）。

因此，在占位符中，我应该放置this.state {each}之类的东西，它不能正常运行。你能给我提建议吗？

Answer 1

尽管这不是解决您问题的方法，但我想解决的问题很少。

请停止使用componentWillMount，因为已弃用。

因此您可以直接在构造函数中分配道具

  constructor(props) {
       super(props);
       this.state = {
            name: this.props.userToChange.name,
            age: this.props.userToChange.age,
            gender: this.props.userToChange.gender,
            phone: this.props.userToChange..phone,
            address: this.props.userToChange.address,
            display: "none"
       };
   }

注意：您不需要为每个使用setState。您可以在单个setState中完成所有操作，如下所示

     this.setState({
            name: this.props.userToChange.name,
            age: this.props.userToChange.age,
            gender: this.props.userToChange.gender,
            phone: this.props.userToChange..phone,
            address: this.props.userToChange.address,
            display: "none"
       });

Answer 2

您可以根据自己的情况使用placeholder={this.state[each]}。另外，请使用componentDidMount，因为{Think-Twice解释说，componentWillMount将来会被弃用。另外，一次设置您的状态，而不是那样单独设置。

const usersParam = ['name', 'age', 'gender', 'phone', 'address'];

class FormForUserChange extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
      age: "",
      gender: "",
      phone: "",
      address: "",
      display: "none"
    };
  }

  componentDidMount = () => {
    this.setState({
      name: this.props.userToChange.name,
      age: this.props.userToChange.age,
      gender: this.props.userToChange.gender,
      phone: this.props.userToChange.phone,
      address: this.props.userToChange.address,
    });
  };

  _makeListFormData = (usersParam) => {
    return usersParam.map(each => {
      return (
        <input
          className="form-control"
          type="text"
          // defaultValue={this.state.{each}}
          placeholder={this.state[each]}
          ref={input => (this.each = input)}
        />
      );
    });
  }

  render() {
    const inputsInForm = this._makeListFormData(usersParam);
    return(
      <div>{inputsInForm}</div>
    );
  }
}

const userToChange = {
  name: "foo",
  age: 25,
  gender: "male",
  phone: "123",
  address: "some add",
}

ReactDOM.render(<FormForUserChange userToChange={userToChange} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

通过使用map（）构建表单，如何从this.state放入信息？

2 个答案: