背景色のボタンがorangeあり、子要素はとしてマークされていredます。オレンジ色の領域をクリックすると、必要な結果（要素のID）がred得られますが、領域をクリックすると、ID（またはターゲット要素）が得られません。
ボタンのどこかをクリックしても同じID（ボタン要素）を取得できるように、子をボタンでラップするにはどうすればよいですか？
const Example = () => {
return (
<button
id="01"
style={{ backgroundColor: "orange", padding: "40px" }}
onClick={e => console.log(e.target.id)}
>
<span
style={{ backgroundColor: "red", padding: "20px" }}
className="content-type"
>
Button One
</span>
</button>
);
};
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>CSSからの解決策を誰も期待していないと思います
しかし、あなたはただcssとBOOMを追加することができます：
pointerEvents : "none"
以下のコードスニペットを実行してください。お役に立てば幸いです。
const Example = () => {
return (
<button
id="01"
style={{ backgroundColor: "orange", padding: "40px" }}
onClick={e => console.log(e.target.id)}
>
<span
style={{ backgroundColor: "red", padding: "20px" , pointerEvents : "none" }}
className="content-type"
>
Button One
</span>
</button>
);
};
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加