reactjs - React JS 中的所有按钮触发 onSubmit

Question

我正在使用 React 开发一个项目，请注意，我对这个框架还很陌生，而且我在 Web 开发方面的经验微乎其微。

我正在创建一个表单，管理人员可以在其中为用户添加技能，但问题是这个表单包含许多按钮，任何按钮都会触发 onSubmit 事件。

有没有办法克服这个问题？

这是我的表单代码:

TL;DR，只有表单的代码出现在最后的片段中。

var Textbox = React.createClass({

  getInitialState: function() {
    return {
      value: ''
    };
  },

  changeValue: function(event) {
    this.setState({
      value: event.target.value
    });
    console.log(this.state.value);
  },

  render: function() {
    return ( <
      div >
      <
      label > {
        this.props.children
      } < /label> <
      input type = "text"
      ref = "input"
      id = "textbox"
      value = {
        this.state.value
      }
      onChange = {
        this.changeValue
      }
      /> < /
      div >
    );

  }
});

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

var Numbox = React.createClass({

  getInitialState: function() {
    return {
      value: ''
    };
  },

  changeValue: function(event) {
    this.setState({
      value: event.target.value
    });
    console.log(this.state.value);
  },

  render: function() {
    return ( <
      div >
      <
      label > {
        this.props.children
      } < /label> <
      input type = "number"
      ref = "input"
      id = "textbox"
      value = {
        this.state.value
      }
      onChange = {
        this.changeValue
      }
      /> <
      /div>
    );

  }
});

var RatingDropdown = React.createClass({
  getInitialState: function() {
    return ({
      value: 'Level 5'
    });
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
  },

  render: function() {
    return ( <
      div >
      <
      label > Rating: < /label> <
      select value = {
        this.state.value
      }
      onChange = {
        this.handleChange
      }
      id = "optionbox" >
      <
      option value = "1" > Rating 1 < /option> <
      option value = "2" > Rating 2 < /option> <
      option value = "3" > Rating 3 < /option> <
      option value = "4" > Rating 4 < /option> <
      option value = "5" > Rating 5 < /option> <
      option value = "6" > Rating 6 < /option> <
      option value = "7" > Rating 7 < /option> <
      option value = "8" > Rating 8 < /option> <
      option value = "9" > Rating 9 < /option> <
      option value = "10" > Rating 10 < /option> <
      option value = "11" > Rating 11 < /option> <
      option value = "12" > Rating 12 < /option> <
      /select>     <
      /div>
    )
  }
});

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

var Prereq = React.createClass({
  getInitialState: function() {
    return {
      editing: false
    };
  },

  edit: function() {
    this.setState({
      editing: true
    });
  },

  save: function() {
    var val = this.refs.input.value;
    this.props.updatePrereqText(this.refs.input.value, this.props.index)
    console.log(val);
    this.setState({
      editing: false
    });
  },

  remove: function() {
    this.props.removePrereqText(this.props.index);
  },

  renderNormal: function() {
    return ( <
      div >
      <
      label > idPrerequisite_Skill: < /label> <
      div > {
        this.props.children
      } < /div> <
      button onClick = {
        this.edit
      } > Edit < /button> <
      button onClick = {
        this.remove
      } > Delete < /button> <
      /div>
    );
  },

  renderForm: function() {
    return ( <
      div >
      <
      label > idPrerequisite_Skill: < /label> <
      input type = "number"
      ref = "input"
      defaultValue = {
        this.props.children
      }
      /> <
      button onClick = {
        this.save
      } > save < /button> <
      /div>
    );
  },

  render: function() {
    if (this.state.editing) {
      return this.renderForm();
    } else {
      return this.renderNormal();
    }
  }
});

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

var PrereqCollection = React.createClass({

      getInitialState: function() {
        return {
          prerequisites: []
        }
      },

      addPrereq: function(text) {
        var temp = this.state.prerequisites;
        temp.push(text);
        this.setState({
          prerequisites: temp
        });
      },

      removePrereq: function(i) {
        console.log('Removing Prereq: ' + i);
        var temp = this.state.prerequisites;
        temp.splice(i, 1);
        this.setState({
          prerequisites: temp
        });
      },

      updatePrereq: function(newText, i) {
        console.log('Updating Prereq: ' + i);
        var temp = this.state.prerequisites;
        temp[i] = newText;
        this.setState({
          prerequisites: temp
        });
      },

      eachPrereq: function(text, i) {
        return ( <
            Prereq key = {
              i
            }
            index = {
              i
            }
            updatePrereqText = {
              this.updatePrereq
            }
            removePrereqText = {
              this.removePrereq
            } > {
              text
            } < /Prereq>);
          },

          render: function() {
            return ( <
              div >
              <
              label > Prerequisites: < /label>  <
              button onClick = {
                this.addPrereq.bind(null, '1')
              } > Add < /button> {
                this.state.prerequisites.map(this.eachPrereq)
              } <
              /div>
            );
          }

      });

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

var Form = React.createClass({

  handleSubmit: function(evt) {
    alert('An essay was submitted: ');
    evt.preventDefault();
  },

  render: function() {
    return ( <
      form onSubmit = {
        this.handleSubmit.bind(this)
      } >
      <
      Textbox > Name: < /Textbox> <
      RatingDropdown > Rating: < /RatingDropdown> <
      Numbox > idParent_Skill: < /Numbox> <
      PrereqCollection / >
      <
      input type = "submit"
      value = "Submit" / >
      <
      /form>
    );
  }
});

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

Answer 1

将其他按钮的类型指定为button .

<button type="button">foo</button>