Question

我有一个带有输入字段和按钮的HTML文档，该按钮在单击时从输入字段获取值，并在HTML页面上的<li>对象内呈现一个新的<ul>对象。

我基本上想要的是在单击“添加”按钮时使用输入字段的值创建一个<list>元素。然后将该列表对象插入ID为“ list”的<ul id="list"></ul>对象中。这是我的代码：

<!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>

我对React还是很陌生，所以我的第一个问题是，有没有一种方法可以直接从函数（例如，单击按钮时）呈现列表元素并将其放置在<ul>对象内部，从而指定一些“身份证”？还是我必须首先创建一个外部额外的Component类，然后在ReactDOM.render（）函数中再次渲染该List对象？

因为我发现这种非常简单和不便的方法是为具有某些功能的html代码的每一位创建一个包装器类，然后在我想执行或动态更改html时调用ReactDOM.render（）函数。这是React的工作方式吗，还是我想得太辛苦了？

我知道在上面的代码中，我正在调用ReactDOM.render（）函数来创建新的列表对象，但这显然是错误的... 但是，如果可以通过某种函数即时创建它，那将使事情变得更容易。

Answer 1

好，所以您需要先学习一些东西，

在反应onclick中应写为onClick，这是区分大小写的
您不应将li直接附加到ui元素上，这是您需要使用状态并更新dom的不良做法。
您的状态设计很糟糕，您需要在这里做两件事，第一个是listobject，它将用于文本框，第二个是用户输入的列表对象的列表。

constructor() {
        super();
        this.state = {
          listEntry: '',
          list: []
        }
        this.onInputChange = this.onInputChange.bind(this);
        this.addListObject = this.addListObject.bind(this);
      };

请注意这里的状态更改，我已将列表添加到状态

  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>

在这里，我遍历列表并绑定它们，检查我添加到li的密钥以告诉反应不要每次都更新。了解更多here。

Demo

Answer 2

我猜这是您本质上想要实现的目标？

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="reactHere"></div>


<script type="text/babel">
class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = { list: [], value: '' };
    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 = '';
    this.setState(state);
  }

  onInputChange (event) {
    const state = this.state;
    state.value = event.target.value;
    this.setState(state);
  }
  
  render() {
    return ( 
      <div>
        <h1> Hello World! </h1> 
        <label for="inputName"> Eingabe Listeneintrag: < /label> 
        <input id="inputName" value={this.state.value} onChange={this.onInputChange}/>
        <button onClick={this.addListObject}>Add</button> 
        <ul>{this.state.list.map((li, i) => <li key={i}>{li}</li>)}</ul> 
      </div>
    );
  }
}

ReactDOM.render( < MyComponent / > , document.getElementById('reactHere'));
</script>

Answer 3

这对您有意义吗？

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'));

Answer 4

您可以存储一个数组以将列表保持在您的状态，然后使用该数组在 ul 中呈现列表项。在此处查看下面的代码段

https://codesandbox.io/s/zn5jmm8jwl

反应：直接从<ul> </ul>内部的具有ID的函数渲染列表对象吗？

4 个答案: