我搜索了這個，我找到的最接近的是這個 SO post here ; 但是，它不使用 React。
我在下面的 React 組件中嘗試了以下語法：
<input
value={props.value}
onChange={props.onChange}
className={props.className}
placeholder={props.placeholder}
name={props.name} {props.readonly && 'readonly'}>
但是我得到一個 eslint 決議錯誤，當我檢查 UI 時它仍然是可寫的。
uj5u.com熱心網友回復：
洗掉{props.readonly && 'readonly'}
和添加readonly 屬性說明readonly={props.readonly}請參考這里。
您的問題是輸入元素（和所有反應組件）僅采用 key={value} 形式的鍵/值對，但是您試圖插入一些 javascript 代碼而不將結果的值分配給鍵。
編輯：應該使用只讀屬性，而不是禁用，如評論中所述。
uj5u.com熱心網友回復：
你可以有一個input沒有onChangewhen props.readonlyis true。像這樣的東西：
<input
value={props.value}
onChange={props.readonly ? undefined : props.onChange}
className={props.className}
placeholder={props.placeholder}
name={props.name}
/>
uj5u.com熱心網友回復：
使用該屬性readOnly并將其傳遞給布林值
const Example = (props) => {
return (
<input readOnly={props.readonly} value={props.title}/>
);
};
// Render it
ReactDOM.render(
<Example title="Example using Hooks:" readonly={true}/>,
document.getElementById("react")
);[readonly] {color:red}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/403738.html
標籤：
下一篇：理解反應函式符號