Question

尝试设置简单的内容。

父母：app.js

class App extends React.Component {
  constructor(props) {
    super(props);
    //This acts as our global state
    this.state = {
      username: "",
      email: "",
      bio: ""
    };
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        username: "jonny",
        email: "jonny@mail.com",
        bio: "My bio...."
      });
    }, 5000);
  }
  handleFormChange = data => {
    this.setState(data);
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <Form data={this.state} onHandleFormChange={this.handleFormChange} />
        <p>Name from App state: {this.state.username}</p>
        <p>Email from App state: {this.state.email}</p>
        <p>Bio from App state: {this.state.bio}</p>
      </div>
    );
  }
}

孩子：form.js

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ...this.props.data
    };
  }
  handleSubmit = e => {
    e.preventDefault();
  };
  handleChange = e => {
    this.props.onHandleFormChange({ [e.target.name]: e.target.value });
  };
  // static getDerivedStateFromProps(nextProps, prevState) {
  //   console.log(nextProps.data)
  //   return {
  //     ...nextProps.data
  //   };
  // }
  componentDidUpdate(prevProps) {
    if (prevProps.data !== this.props.data) {
      this.setState({ ...this.props.data });
    }
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="username"
            defaultValue={this.state.username}
            onChange={this.handleChange}
          />
          <input
            type="email"
            name="email"
            defaultValue={this.state.email}
            onChange={this.handleChange}
          />
          <textarea
            name="bio"
            defaultValue={this.state.bio}
            onChange={this.handleChange}
          />
          <input type="submit" value="submit" />
        </form>
      </div>
    );
  }
}

在此示例中，我使用setTimeout()创建了一个人工API调用，并且我尝试使用API调用的结果设置父级的状态。然后我想把它作为道具传递给孩子...

除了textarea以外，其他所有功能均有效。如果我检查DOM即可看到它，但实际上它并未显示在浏览器中...

请注意检查器中的“我的生物...”，但浏览器中的文本区域为空。

我尝试了componentWillUpdate()，componentDidUpdate()和getDerivedStateFromProps()，但似乎没有任何效果。

我想念什么？

请注意：我没有使用value=""，因为这样会阻止我键入内容，并且此表单应该可以让您更新现有值

沙箱... https://codesandbox.io/s/ancient-cloud-b5qkp?fontsize=14

Answer 1

使用sleep属性而不是value似乎可以正常工作。 defaultValue属性实际上应该仅少量使用，因为您几乎总是希望您的输入连接到组件状态。创建受控输入的最佳方法是使用defaultValue。

value

Answer 2

将textarea中的defaultValue更改为value

ReactJS：为什么我的textarea值总是不可见？

2 个答案: