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，因为我没有看到与反应有任何区别。

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' />

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

2 个答案: