时间戳

首页 > 解决方案 > ReactJS：为什么我的 textarea 值总是呈现不可见？

javascript - ReactJS：为什么我的 textarea 值总是呈现不可见？

问题描述

试图建立一些简单的东西。

家长：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>
    );
  }
}

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

除了textarea. 如果我检查 DOM，我可以看到它，但它实际上并没有显示在浏览器中......

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

在此处输入图像描述

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

我错过了什么？

注意：我没有使用value=""，因为它会阻止我输入，并且此表单应该允许您更新现有值

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

标签： javascriptreactjsecmascript-6

解决方案

通过使用value属性而不是defaultValue. 该defaultValue属性实际上应该谨慎使用，因为您几乎总是希望您的输入连接到组件状态。创建受控输入的最佳方法是使用value.

      <textarea
        name="bio"
        value={this.state.bio}
        onChange={this.handleChange}
      />

推荐阅读