如何在ReactJS中使用单选按钮?

我是ReactJS的新手，如果这听起来很不好意思。我有一个组件，根据接收到的数据创建几个表行。

列中的每个单元格都有一个单选复选框。因此，用户可以从现有行中选择一个site_name和一个地址。所选内容应显示在页脚中。这就是我被困住的地方。

var SearchResult = React.createClass({
  render: function () {
    var resultRows = this.props.data.map(function (result) {
      return (
        <tbody>
          <tr>
            <td>
              <input type="radio" name="site_name" value={result.SITE_NAME}>
                {result.SITE_NAME}
              </input>
            </td>
            <td>
              <input type="radio" name="address" value={result.ADDRESS}>
                {result.ADDRESS}
              </input>
            </td>
          </tr>
        </tbody>
      );
    });
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name ???? </td>
            <td>chosen address ????? </td>
          </tr>
        </tfoot>
      </table>
    );
  },
});

在jQuery中，我可以做一些像$("input[name=site_name]:checked").val()这样的事情来获得一个radio复选框类型的选择，并将其插入到第一个页脚单元格中。

但肯定有一个Reactjs的方式，我完全错过了?非常感谢

当前回答

这是我用过的。希望这能有所帮助。首先定义变量。

const [variableName, setVariableName] = useState("");

然后，我们将需要实际的单选按钮。

<input
   type="radio"
   name="variableName"
   value="variableToCheck"
   onChange={(e) =>
   setVariableName("variableToCheck")
   }
   checked={variableName === "variableToCheck"}
/>

2021-06-22 05:33:37

其他回答

单击单选按钮应该触发一个事件，其中之一:

如果只希望选择知识是本地的，则调用setState 调用一个从上面传入的回调函数self.props.selectionChanged(…)

在第一种情况下，改变状态将触发重新渲染，你可以这样做 <td>所选站点名称{this.state. name。chosenSiteName} < / td >

在第二种情况下，回调的源将更新内容，以确保您的SearchResult实例将有chosenSiteName和chosenAddress设置在它的props中。

2015-01-05 17:44:30

任何对渲染的改变都应该通过状态或道具(react doc)来改变。

所以这里我注册了输入的事件，然后改变状态，这将触发渲染显示在页脚上。

var SearchResult = React.createClass({
  getInitialState: function () {
    return {
      site: '',
      address: '',
    };
  },
  onSiteChanged: function (e) {
    this.setState({
      site: e.currentTarget.value,
    });
  },

  onAddressChanged: function (e) {
    this.setState({
      address: e.currentTarget.value,
    });
  },

  render: function () {
    var resultRows = this.props.data.map(function (result) {
      return (
        <tbody>
          <tr>
            <td>
              <input
                type="radio"
                name="site_name"
                value={result.SITE_NAME}
                checked={this.state.site === result.SITE_NAME}
                onChange={this.onSiteChanged}
              />
              {result.SITE_NAME}
            </td>
            <td>
              <input
                type="radio"
                name="address"
                value={result.ADDRESS}
                checked={this.state.address === result.ADDRESS}
                onChange={this.onAddressChanged}
              />
              {result.ADDRESS}
            </td>
          </tr>
        </tbody>
      );
    }, this);
    return (
      <table className="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
          </tr>
        </thead>
        {resultRows}
        <tfoot>
          <tr>
            <td>chosen site name {this.state.site} </td>
            <td>chosen address {this.state.address} </td>
          </tr>
        </tfoot>
      </table>
    );
  },
});

jsbin

2015-01-05 17:45:12

我们是这样做的:


export default function RadioButton({ onChange, option }) {
    const handleChange = event => {
        onChange(event.target.value)
    }

    return (
        <>
            <div className="custom-control custom-radio">
                <input
                    type="radio"
                    id={ option.option }
                    name="customRadio"
                    className="custom-control-input"
                    onChange={ handleChange }
                    value = { option.id }
                    />
                    <label
                        className="custom-control-label"
                        htmlFor={ option.option }
                        >
                        { option.option }
                    </label>
            </div>
        </>
    )
}

2020-02-29 14:40:17

@Tomasz Mularczyk在他的回答中提到了react钩子，但我认为我应该加入一个我最近使用的解决方案，只使用useState钩子。

function Radio() {
  const [currentRadioValue, setCurrentRadioValue] = useState()

  const handleRadioChange = (e) => {
    setCurrentValue(e.target.value);
  };

  return ( 
    <>
      <div>
        <input
          id="radio-item-1"
          name="radio-item-1"
          type="radio"
          value="radio-1"
          onChange={handleRadioChange}
          checked={currentRadioValue === 'radio-1'}
        />
        <label htmlFor="radio-item-1">Radio Item 1</label>
      </div>
      <div>
        <input
          id="radio-item-2"
          name="radio-item-2"
          type="radio"
          value="radio-2"
          onChange={handleRadioChange}
          checked={currentRadioValue === 'radio-2'}
        />
        <label htmlFor="radio-item-2">
          Radio Item 1
        </label>
      </div>
    </>
  );
}

2021-05-11 17:57:43

这是我用过的。希望这能有所帮助。首先定义变量。

const [variableName, setVariableName] = useState("");

然后，我们将需要实际的单选按钮。

<input
   type="radio"
   name="variableName"
   value="variableToCheck"
   onChange={(e) =>
   setVariableName("variableToCheck")
   }
   checked={variableName === "variableToCheck"}
/>

2021-06-22 05:33:37

如何在ReactJS中使用单选按钮?

推荐文章

最新文章

标签