在 Reactjs 中，我如何为复选框做自定义消息。我看到这个问题有很多答案适用于javascript而不是reactjs答案

【问题标题】：In Reactjs how can I do custom message for checkbox. I see there are lot of answers for this issue which works in javascript not in reactjs在 Reactjs 中，我如何为复选框做自定义消息。我看到这个问题有很多答案适用于javascript而不是reactjs
【发布时间】：2018-10-25 08:27:02
【问题描述】：

我仍然得到选择复选框，但我需要显示“同意条款”（我确实在 javascript 中看到很多与此类似的示例，但这些示例对我不起作用）请有人帮我解决这个问题。

谢谢

更新：

我在这里得到的输出是我提到的链接：https://www.the-art-of-web.com/html/html5-checkbox-required/#example1

【问题讨论】：

标签： javascript html reactjs

【解决方案1】：

一种方法是创建一个有状态的组件，它只跟踪一个状态：无论它是否被检查。然后，您可以从渲染方法内部的选中状态中获取消息。例如，您可以创建一个辅助方法，该方法在未选中时返回您的自定义验证消息，并在选中时返回一个空字符串。见代码 sn-p。

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>

【讨论】：

@Poosapati，您有机会查看我的答案吗？希望知道它是否对您有所帮助。谢谢！
嘿 Kal，感谢您的帮助，但我不是在寻找这种输出。添加了截图以供参考。这是一条默认消息，我想添加自定义消息说“同意条款”，而不是选中此复选框。
我明白了！我很高兴你明白了。感谢您的回复。

【解决方案2】：

您应该发布您的解决方案，以便其他人可以从中学习。

这是一个解决方案：

        <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("") 实际上并没有工作（仍然不确定为什么），但必须将一个空格传递给 setCustomValidity 函数才能使其工作。有了这个，我不得不在超时时重置 setCustomValidity。 Hacky 虽然现在就像一个魅力。如果您想根据错误传递不同的消息，只需查看 e.target.validity 以查看触发了哪些错误，然后使用 setCustomValidity 返回一条新消息。

【讨论】：