react 防止form中的按钮触发表单submit提交事件

class Counter extends React.Component {

  constructor(props) {
    super(props);
    this.state={
      checkout:true,
      userNum:1,
    }
  }
  handleChange = (event) => {
    console.log(event)
    let obj={
      userNum:()=>{
        console.log(event.target.value)
      },
      checkout:()=>{

        this.setState({
          checkout:event.target.checked,
        })
        console.log(event.target.checked,'修改状态',this.state)
      }
    }
    obj[event.target.name]();
    // const target = event.target;
    // const value = target.type === 'checkbox' ? target.checked : target.value;
    // const name = target.name;
 
    // this.setState({
    //   [name]: value
    // });
  }
  edidCheckout=(e)=>{
    e.nativeEvent.stopImmediatePropagation() //阻止事件冒泡
    e.stopPropagation();
    this.setState({
      checkout:!this.state.checkout,   
      userNum:this.state.userNum+1
    })
    console.log(this.state.checkout)
  }

  render() {

    return <div>
        <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
        <h4>{this.props.myDataProp}</h4>

        <form onSubmit={this.props.updataSubimit}>
        <label>
          <select value={this.props.selectValue} onChange={this.props.updataSelect} name='selct'> 
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
          </label>
          <label>
          是否确认  <input
            name="checkout"
            type="checkbox"
            checked={this.state.checkout}
            onChange={this.handleChange} />
          </label>
          <label>
            user 数量
            <input type='number' value={this.state.userNum} name='userNum' onChange={this.handleChange} />
          </label>
          <input type="submit" value="提交" />
          <br/>
          <button onClick={this.edidCheckout}>修改状态</button>
        </form>
        </div>;
  }
}

在这串代码中我点击form中的button发现他会触发表单原本的submit事件，后来在网上找到的阻止冒泡事件也没有效果，最后查询资料发现，只要在button按钮中添加type=button就不会触发表单的提交事件了

  <button type='button' onClick={this.edidCheckout}>修改状态</button>

初学react记录一下