如何获取文本字段值并将该值推送到 arrayList

Question

如何获取文本字段值并将该值推送到 react js 中的 arrayList？

我想从文本框中获取值并将其推送到 Modules 数组，以便我可以通过迭代来呈现值。

我尝试使用 ref 但出现错误。

你能帮帮我吗？

 constructor(props) {
            super(props);
          this.state={
            module:'',
            Modules: []
          }
        }

        change (event){
            this.setState({
              [event.target.name]:event.target.value
            });
          };

        createModule (e) {
          e.preventDefault();
          console.log("submitted",this.state.module);
          this.setState(previousState => ({
              ...state,
              thisModules: [...previousState.Modules, 'new value']
          }));
        };

      render(){
        return(

            <form className="form-inline">
                  <div className="form-group">
                            Module Name:
                            <input type="text" id="module" 
                                name="module" 
                                  placeholder="module"  
                                    className="form-control" 
                                      ref="Module"
                                        value ={this.state.module}
                                          onChange={event => this.change(event)}/>
                  <button type="submit" className="btn btn-primary" onClick={(event) => this.createModule(event)}>Add Module</button>
                    </div>
            </form>

Answer 1

mylist.push(document.getElementById('textbox_id').value)

将 mylist 作为您的列表，将 textbox_id 作为文本框的 id 应该可以工作。

认为这是普通的 javascript，因为我看不出与 react 有什么区别。

Answer 2

运行代码的主要问题是，在createModule 中，您没有将this 放在state 前面。如果您提供了错误的详细信息，这会有所帮助。

还有一些其他错别字，下面是一个工作解决方案。

class ModuleList extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      module:'',
      Modules: []
    }
  }

  change (event){
    this.setState({
      [event.target.name]:event.target.value
    });
  }

  createModule (e) {
    e.preventDefault();
    console.log("submitted",this.state.module);
    this.setState(previousState => ({
      ...this.state,
      Modules: [...previousState.Modules, this.state.module]
    }));
  };

  render(){
    return (
      <form className="form-inline">
        <div className="form-group">
          Module Name:
            <input type="text" id="module" 
              name="module" 
              placeholder="module"  
              className="form-control" 
              ref="Module"
              value={this.state.module}
              onChange={event => this.change(event)}/>
            <button type="submit" className="btn btn-primary" onClick={(event) => this.createModule(event)}>Add Module</button>
          </div>
        
          <ul>
          {
            this.state.Modules.map(
              (m) => <li>{m}</li>
            )
          }
          </ul>
        </form>
      );
  }
}

ReactDOM.render(
  <ModuleList />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<p>My App:</p>
<div id='root' />