Javascript 反应：直接从函数内部渲染列表对象<；ul></ul>；有身份证吗？_Javascript_Html_Reactjs

Javascript 反应：直接从函数内部渲染列表对象<；ul></ul>；有身份证吗？

javascript html reactjs

Javascript 反应：直接从函数内部渲染列表对象<；ul></ul>；有身份证吗？,javascript,html,reactjs,Javascript,Html,Reactjs,我有一个HTML文档，其中有一个输入字段和一个按钮，单击该按钮时从输入字段获取值，并在我的HTML页面上的对象中呈现一个新的对象我基本上想要的是，在单击“添加”按钮时，用输入字段的值创建一个元素。然后将该列表对象插入id为“list”的my对象中。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Greeter</title

我有一个HTML文档，其中有一个输入字段和一个按钮，单击该按钮时从输入字段获取值，并在我的HTML页面上的

对象中呈现一个新的对象
我基本上想要的是，在单击“添加”按钮时，用输入字段的值创建一个
元素。然后将该列表对象插入id为“list”的my
对象中。这是我的密码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Greeter</title>
    <script src="libs/react.js"></script>
    <script src="libs/react-dom.js"></script>
    <script src="libs/browser.min.js"></script>
  </head>
  <body>
    <div id="reactHere"></div>

  </body>

  <script type ="text/babel">
    class MyComponent extends React.Component {
      constructor() {
        super();
        this.state= {
        listEntry: ''
        }
      };

      onInputChange(event) {
        this.setState({
            listEntry: event.target.value
          });
      };

      addListObject() {
        ReactDOM.render(<li>{this.state.ListEntry}</li>, document.getElementById('liste'));
      };

      render() {
        return (
        <div>
          <h1>Hello World!</h1>
          <label for="inputName">Eingabe Listeneintrag:</label>
          <input 
          name="inputName"
          value={this.state.listEntry}
          onChange={(e)=>this.onInputChange(e)}>        
          </input>
          <button 
          onclick = {(e)=>this.addListObject}
          >
          Add
          </button>
          <ul id="liste"></ul>
        </div>
        );
      }

    }  


    ReactDOM.render(<MyComponent />, document.getElementById('reactHere'));
  </script>
</html>


迎宾员
类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
此。状态={
列表输入：“”
}
};
onInputChange（事件）{
这是我的国家({
listEntry:event.target.value
});
};
addListObject（）{
ReactDOM.render（{this.state.ListEntry}，document.getElementById（'liste'））；
};
render（）{
返回(
你好，世界！
Eingabe Listeneintrag：
此.onInputChange（e）}>
此.addListObject}
>
添加

);
}
}  
render（，document.getElementById（'reactHere'）；

我还是个新手，所以我的第一个问题是，有没有一种方法可以直接从一个函数（例如，当单击一个按钮时）呈现列表元素，并将其放置在一个指定某个“id”的对象中？
或者我必须首先创建一个外部的额外组件类，然后再次在ReactDOM.render（）函数中呈现该列表对象吗
因为我发现为每一段具有某种函数的html代码创建一个包装器类，然后在需要动态执行或更改html时调用ReactDOM.render（）函数，这是非常简单和不方便的。。。React就是这样工作的还是我想得太多了
我知道在上面的代码中，我调用ReactDOM.render（）函数来创建我的新列表对象，但这显然是错误的。。。
但如果有可能在函数中动态创建它。。。这会使事情变得更容易
 这对你有意义吗
class MyComponent extends React.Component {
  constructor() {
    super();
    this.state= {
       listEntry: '',
       entries: []
    }
  };

  onInputChange(event) {
    this.setState({
        listEntry: event.target.value
      });
  };

  addListObject() {
    this.setState({
      entries: this.state.entries.concat({name: this.state.listEntry})
    })
  };

  renderEntries = () => {
     this.state.entries.map((entry, i) => return <li key={i}>{entry.name}</li>)
  } 

  render() {
    return (
    <div>
      <h1>Hello World!</h1>
      <label for="inputName">Eingabe Listeneintrag:</label>
      <input 
      name="inputName"
      value={this.state.listEntry}
      onChange={(e)=>this.onInputChange(e)}>        
      </input>
      <button 
      onclick = {() => this.addListObject()}
      >
      Add
      </button>
      <ul id="liste">{this.renderEntries()}</ul>
    </div>
    );
  }

}  


ReactDOM.render(<MyComponent />, document.getElementById('reactHere'));

类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
此。状态={
listEntry:“”，
条目：[]
}
};
onInputChange（事件）{
这是我的国家({
listEntry:event.target.value
});
};
addListObject（）{
这是我的国家({
条目：this.state.entries.concat（{name:this.state.listEntry}）
})
};
renderEntries=（）=>{
this.state.entries.map（（entry，i）=>return{entry.name}）
} 
render（）{
返回(
你好，世界！
Eingabe Listeneintrag：
此.onInputChange（e）}>
this.addListObject（）}
>
添加
{this.renderEntries（）}
);
}
}  
render（，document.getElementById（'reactHere'）；
好的，那么你需要先学习一些东西
在reactonclick
中，应将其写为onclick
区分大小写
您不应该将li直接附加到ui元素，这是一种错误的做法，您需要使用状态并更新dom
你的状态设计不好，你需要两件东西，第一件是listobject，它将用于文本框，第二件是用户输入的listobject列表
在这里，我将当前条目添加到列表中并清除列表条目
<ul id="liste">{
          this.state.list.map(a => {
            return <li key={a}>{a}</li>
          })
        }</ul>

{
this.state.list.map（a=>{
return{a}
})
}

在这里，我在列表上循环并绑定它们，检查我添加到li的密钥，告诉react to不要每次更新。了解更多
我猜这就是你想要实现的目标


类MyComponent扩展了React.Component{
构造函数（）{
超级（）；
this.state={list:[]，值：''}；
this.onInputChange=this.onInputChange.bind（this）；
this.addListObject=this.addListObject.bind（this）；
}
addListObject（）{
const state=this.state；
state.list.push（this.state.value）；
state.value=''；
本.设置状态（状态）；
}
onInputChange（事件）{
const state=this.state；
state.value=event.target.value；
本.设置状态（状态）；
}
render（）{
报税表（
你好，世界！
Eingabe Listeneintrag:
添加
{this.state.list.map（（li，i）=>{li}
）}
);
}
}
render（，document.getElementById（'reactHere'）；
您可以存储一个数组以在您的状态下保存列表，然后使用该数组在ul中呈现列表项。检查下面的代码片段
可能重复感谢，我不知道如何通过简单的javascript或JSX表达式创建新元素……我必须习惯React中的状态和事件。。。不知何故，对我来说是一个全新的概念；）。每次单击按钮时重置listEntry状态的好技巧。。。我以为在某个时候整个州的事情会变得一团糟。。你必须基本上跟踪用户在你的组件类中可以做的每一件事，对吗？@user2883596大多数情况下state会为你做所有的事情，就像数据库为你做的一样，如果你仍然想给dom提供一些动态内容，你可以参考这一点，我仍然建议你坚持使用一个根元素并使用state来rest元素。是的，谢谢，工作原理是这样的，但是我发现React代码可以将javascript/JSX与html代码混合在一起，这有点混乱。。此外，如果您必须创建许多组件作为html的包装器。。。很容易忘记什么组件正在做什么，或者不做什么？嘿，
  addListObject() {
    this.setState({
      list: this.state.list.concat(this.state.listEntry),
      listEntry: ''
    });
  };

<ul id="liste">{
          this.state.list.map(a => {
            return <li key={a}>{a}</li>
          })
        }</ul>