如何在 ReactJS 中手动设置输入值？

Question

我正在使用 react-bootstrap-validation 来验证输入字段。我想要基于点击设置一些输入字段的选项。我知道我需要直接设置状态而不是 DOM，但不确定在这种情况下如何设置。

具体来说，我想在 this line in the onClick handler 上设置字段，而我正在使用 console.log。

相关代码：

generateKeys() {
  console.log('generating keys...');
  let keyPair = tweetnacl.sign.keyPair();
  let publicKey = tweetnacl.util.encodeBase64(keyPair.publicKey);
  let secretKey = tweetnacl.util.encodeBase64(keyPair.secretKey);
  let encryptedSecretKey = CryptoJS.AES.encrypt(secretKey, 'superfreak').toString();
  console.log(publicKey);
  console.log(secretKey);
  console.log(encryptedSecretKey);
}

render() {
...
  <p>Don't have your own keys? Generate a once-off pair by clicking <a href="#" onClick={this.generateKeys} >here</a>.</p>
  <ValidatedInput
    type='text'
    label='Your public key'
    name='publicKey'
    validate='required'
    errorHelp='Please paste in your public key here'
  />
...

关于执行此操作的最佳方法的想法？

谢谢。

Answer 1

ValidatedInput 似乎是从 Input 扩展而来的，因此您可以使用此组件的 value 属性来设置值。

您可以在 generateKeys 方法中尝试这样的操作：

generateKeys() {
  ...
  this.setState({publicKeyValue: publicKey});
  ...
}

然后使用publicKeyValue状态设置值：

<ValidatedInput
  type='text'
  label='Your public key'
  name='publicKey'
  validate='required'
  errorHelp='Please paste in your public key here'
  value={this.state.publicKeyValue}
/>

如何在 ReactJS 中手动设置输入值？

How do I manually set input values in ReactJS?

reactjs

react-bootstrap