我如何在reactJS中的一行中创建输入[无线电和文本]

Question

“首先，我接受一个输入=>无线电，其次，我接受一个输入=>文本。当我点击文本=>输入时，它应该检查无线电=>输入，而且，当我点击无线电= > 输入，它应该允许我在文本上书写 => 输入。我怎样才能实现这一点？

这就像一个自由选择题。我已经提供了三点。如果您不明白答案，请通过无线电输入选择文本输入，然后写下您的反馈。”

Answer 1

要在 React 中创建一个在一行中包含单选按钮和文本输入的表单，并启用单选按钮和文本输入之间的交互（如上所述），您可以使用以下方法

import React, { useState } from 'react';

const App = () => {
  const [isChecked, setIsChecked] = useState(false);
  const [textInputValue, setTextInputValue] = useState('');

  const handleRadioChange = () => {
    setIsChecked(!isChecked);
  };

  const handleTextInputChange = (e) => {
    setTextInputValue(e.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          checked={isChecked}
          onChange={handleRadioChange}
        />
        Select the text input
      </label>
      <input
        type="text"
        value={textInputValue}
        onChange={handleTextInputChange}
        disabled={!isChecked}
      />
    </div>
  );
};

export default App;