我如何在反应中获得项目符号内的值？

Question

            <br />
            <input type='radio' name='delivery_stat' id='delivery' ></input>
            <label htmlFor="pending" >Pending delivery</label>
            <br />
            <input type='radio' name='delivery_stat' id='delivery' ></input>
            <label htmlFor="done" >Complete delivery</label>

enter image description here

有两种选择。等待交付或完成交付。如果用户 select 待交付，那么我如何在我的代码中获取该值以做出反应。

Answer 1

您需要手动控制 <input> 元素的 value 和 onChange 道具。

首先，为功能组件使用 useState 或 class 组件使用 this.setState 或使用全局状态管理库（通常对简单形式）。

然后，将状态值与 setter 函数一起传递给元素。

更多信息 in the docs here，尽管不幸的是它仍然使用 class 组件，但最好弄清楚 class 组件是如何使用挂钩在功能上编写的。

Answer 2

首先，您需要为从单选按钮中选择的值定义useState

const [selectedValue, setSelectedValue] = React.useState()

然后，您应该有一个点击事件来处理单选按钮选择

//state will be updated according to your radio selection
const handleChange = (e) => {
   setSelectedValue(e.target.value)
}

最后，您应该将 value='Pending delivery' 和 onChange={handleChange} 添加到单选元素中

<input type='radio' name='delivery_stat' id='delivery' value='Pending delivery' onChange={handleChange}/>

完全可能的变化

const App = () => {
    const [selectedValue, setSelectedValue] = React.useState()
    const handleChange = (e) => {
       setSelectedValue(e.target.value)
    }

    return (<div>
       <br />
            <input type='radio' name='delivery_stat' id='delivery' value='Pending delivery' onChange={handleChange}/>
            <label htmlFor="pending" for='Pending delivery'>Pending delivery</label>
            <br />
            <input type='radio' name='delivery_stat' id='delivery' value='Complete delivery' onChange={handleChange}/>
            <label htmlFor="done" for='Complete delivery'>Complete delivery</label>
            
            <div>
              {selectedValue}
            </div>
    </div>)
}

ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

我如何在反应中获得项目符号内的值？

How I get the value inside of a bullet point in react?

html

reactjs

bulletedlist