Question

我不明白如何在React中创建元素。

我在下面有一些代码，目标是使用refs中的值在表单上创建元素 - 因此对于表单中的每个提交，它会创建一个新的<h1>标记内部文本框的内容。我正在尝试做的样本如下：

...

addHeader(e) {
    e.preventDefault();
    const newHeader = this.refs.post.value;
    var newpost = React.createElement("h1", {
      type: "text", 
      value: newHeader
    });
  }

...

render() {
    return (
      <div className="form-section">
          { newPost }
            <form onSubmit={this.addHeader.bind(this)}>
                <input id="input-post" type="text" placeholder="Post Here" ref="post" />
                <input type="submit" value="Submit" />
            </form>
            <button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>      
      </div>
    );
  }

基本上我的想法是在我的addHeader()函数中，我将newPost的变量赋给方法并在我的组件中调用它。此代码导致2个错误：

33：9警告'newpost'被赋值，但从未使用过no-unused-vars

49:13错误'newPost'未定义no-undef

我不明白，是（从我所看到的）我为该变量赋值，并在我正在渲染的组件中使用它......以及那个，我不明白这个错误信息。如何为某些东西分配一个值但同时未定义...？是因为它的范围错了吗？如何声明新元素在组件中的具体呈现位置？

I read the documentation但它没有给出关于如何控制组件中新元素呈现位置的明确答案。

Answer 1

对您的代码进行了一些更改。您将要在constructor中初始化组件状态。在addHeader方法中，您将使用this.setState更新组件的状态，其中包含新的帖子值，包括this.input的值。我在输入上更改了ref实际参考号。您将元素存储在this上。每次添加新帖子时，您都会获得一个新<h1>，其值为textarea。

...

addHeader(e) {
    e.preventDefault();
    this.setState((prevState, props) => {
        return { posts: [ ...prevState.posts, this.input.value ] };
    });
  }

...

render() {
    const { posts } = this.state;
    return (
      <div className="form-section">
          { posts.map( text => <h1>{ text }</h1> ) }
            <form onSubmit={this.addHeader.bind(this)}>
                <input id="input-post" type="text" placeholder="Post Here" ref={ el => this.input = ref } />
                <input type="submit" value="Submit" />
            </form>
            <button className="form-section__submit" onClick={this.clearFields.bind(this)}>Clear All</button>      
      </div>
    );
  }

作为旁白：反应组件render方法中的绑定函数会导致性能下降。无需在每个渲染上重新绑定函数的此上下文。 this.clearFields.bind(this)应该变为this.clearFields，您需要将this.clearFields = this.clearFields.bind(this)添加到constructor。您不需要绑定未用作回调的函数。

您将要为this.addHeader.bind(this)做同样的事情。

在React中创建元素

1 个答案: