Question

使用来自React的a - 标记与input type=checkbox时，我遇到了一个特殊问题。问题是，如果我直接点击复选框而不是a - 标签，则复选框将无法正确重新呈现，但我的状态已更新。

示例：根据下面的代码，我渲染组件并直接单击复选框。在这种情况下，showMap将被设置为false，因为我们在构造函数中将其设置为true，但仍然会在html视图中检查复选框。但是，如果我点击a - 标签但不直接点击复选框，则状态showMap以及视图都会正确更新。

我可以通过不在event.preventDefault();中调用toggleCheckbox来使其工作，但如果我这样做，如果我点击a - 标记，该应用将滚动到页面顶部。

示例：

https://codesandbox.io/s/w2x8vqq8xl

代码：

import React from "react";
import { render } from "react-dom";

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center",
  //marginTop: "1000px"
};

class Menu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showMap: true
    };
  }

  toggleCheckbox = event => {
    this.setState({ showMap: !this.state.showMap });
    event.preventDefault();    
  };

  render() {
    return (
      <div>
        <h1>{this.state.showMap ? "Show" : "hide"}</h1>
        <a href="#" role="button" onClick={this.toggleCheckbox}>
          <input
            type="checkbox"
            title="test"
            name="showMap"
            checked={this.state.showMap}
            readOnly
          />
          Show map
        </a>
      </div>

    );
  }
}

const App = () => (
    <div style={styles}>
      <Menu />
    </div>
);

render(<App />, document.getElementById("root"));

更新

使用React创建了一个问题。

https://github.com/facebook/react/issues/11539

Answer 1

这似乎是浏览器原生行为：

HTML：

<a href="#" role="button" id="anchor">
  <input id="input" type="checkbox" title="test" name="showMap" readonly /> Clicking this text toggles the checkbox
</a>

<hr />
<label><input id="prevent" type="checkbox" /> Prevent Default</label>

<p>With prevent default on, clicking the checkbox does not toggle it. Only clicking the text</p>

CSS：

body {
  font-size: 15px;
  line-height: 1.5;
  padding: 20px;
}

JS：

var anchor = document.getElementById('anchor')
var prevent = document.getElementById('prevent')
var input = document.getElementById('input')
var toggled = false

anchor.addEventListener('click', function (event) {
  if (prevent.checked) {
    event.preventDefault()
  }

  toggled = !toggled

  input.checked = toggled
})

https://codepen.io/nhunzaker/pen/WXONQK

https://github.com/facebook/react/issues/11539#issuecomment-343914330

Answer 2

您可以在# - 代码中使用href，而不是在javascript:void(0)中使用a，以避免滚动到顶部。仅当您在单击a标记时遇到滚动问题时，此功能才有用。希望这有帮助！

Answer 3

使用<p> {{ displayedData | json }} </p>代替使用event.preventDefault()

有关详情，请访问

https://medium.com/@jacobwarduk/how-to-correctly-use-preventdefault-stoppropagation-or-return-false-on-events-6c4e3f31aedb

如果嵌套在html a-tag

3 个答案: