在React中创建元素

我不明白如何在React中创建元素。在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' 被分配一个值，但从来没有使用没有未使用的-瓦尔

49:13错误 'newPost' 没有定义无为undef

我不明白，是（从我能看到的）我分配一个值给该变量，并在我正在渲染的组件中使用它...与此同时，我没有理解这个错误信息。怎样才能赋值给某个值，但同时不确定......？是因为它在错误的范围内吗？我如何声明新元素在组件中的具体位置？

I read the documentation但它没有给出明确的答案，就如何控制组件中新元素的渲染位置。

来源

2017-07-26 kawnah

您的变量名为'newpost'，但您在'render（）'中使用'newPost'。请注意小写字母与大写字母'p'。 – Purag

它也是无法访问的，因为它在另一个方法的范围内。 –

另外，如果您已经使用jsx，则无需使用React.CreateElement。 –

对您的代码进行了一些更改。您将要在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)做同样的事情。

来源

2017-07-26 19:42:11

在React中创建元素

回答

相关问题