在Reactjs中，我如何为checkbox定制消息。我看到有很多关于这个问题的答案，它在javascript中工作，而不是在reactjs中。
我仍然得到选择框，但我需要显示“同意条款”(我确实在javascript中看到了很多类似的示例，但这些示例对我不起作用)，请有人帮助我。
谢谢
更新：
我在这里得到的输出是我引用的链接：https://www.the-art-of-web.com/html/html5-checkbox-required/#example1
回答 2
Stack Overflow用户
发布于 2018-08-05 09:13:37
一种方法是创建一个有状态组件，该组件只跟踪一种状态:是否选中。然后，您可以从render方法内部的选中状态派生消息。例如，您可以创建一个帮助器方法，该方法在未选中时返回自定义验证消息，在选中时返回空字符串。请参见代码段。
const setCustomValidity = isChecked => {
if (isChecked) {
return '';
} else {
return 'You must agree to the terms';
}
}
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
}
this.handleChange = this.handleChange.bind(this);
}
handleChange() {
this.setState({
checked: !this.state.checked,
})
}
render() {
const message = setCustomValidity(this.state.checked);
return (
<div>
<p className="customMessage">{message}</p>
<input
type="checkbox"
className="checkBox"
name="checkbox"
onChange={this.handleChange}
required
/>
</div>
);
}
}
ReactDOM.render(<Checkbox />, document.querySelector("#app"));<div id="app"></div>
<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>
Stack Overflow用户
发布于 2018-10-25 08:27:02
你应该发布你的解决方案，这样其他人就可以从中学习。
这里有一个解决方案：
<input
id="checkers"
value={this.state.checkered}
onInvalid={(e) => {
e.target.setCustomValidity('Please agree to the terms and conditions!');
}}
onChange={(e) => {
**e.target.setCustomValidity(" ");
setTimeout((e) => {
document.getElementById('checkers').setCustomValidity("");
}, 200)**
this.setState({
checkered: !this.state.checkered
});
}}
type="checkbox"
required
>
</input>顺便说一下，对于这种特殊的情况，我不相信你需要粗体的代码。尽管对于那些在未来最终遇到这个问题的人来说...setCustomValidity函数有时会出现一个有趣的小故障，即使在触发验证消息之后，该消息仍会在输入字段的onInput或onChange上触发。在我的例子中，e.target.setCustomValidity("")实际上没有工作(仍然不确定为什么)，尽管必须在a setCustomValidity函数中传递一个空格才能使它工作。这样，我就不得不在超时时重置setCustomValidity。不过，Hacky现在工作起来像个护身符。如果您希望根据错误传递不同的消息，只需查看e.target.validity以了解触发了哪些错误，然后使用setCustomValidity返回一条新消息。
https://stackoverflow.com/questions/51689928
复制相似问题