表單 propType 失敗：您在沒有 `onChange` 處理程序的情況下向表單字段提供了 `value` 道具

Question

當我加載我的反應應用程序時，我在控制台中收到此錯誤。

警告：表單 propType 失敗：您在沒有onChange處理程序的情況下向表單字段提供了value道具。 這將呈現一個只讀字段。 如果該字段應該是可變的，請使用defaultValue 。 否則，設置onChange或readOnly 。 檢查AppFrame的渲染方法。

我的 AppFrame 組件如下：

class AppFrame extends Component {
    render() {
        return (
            <div>
                <header className="navbar navbar-fixed-top navbar-shadow">
                    <div className="navbar-branding">
                        <a className="navbar-brand" href="dashboard">
                            <b>Shire</b>Soldiers
                        </a>
                    </div>
                    <form className="navbar-form navbar-left navbar-search alt" role="search">
                        <div className="form-group">
                            <input type="text" className="form-control" placeholder="Search..."
                                   value="Search..."/>
                        </div>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li className="dropdown menu-merge">
                            <span className="caret caret-tp hidden-xs"></span>
                        </li>
                    </ul>
                </header>

                <aside id="sidebar_left" className="nano nano-light affix">

                    <div className="sidebar-left-content nano-content">

                        <ul className="nav sidebar-menu">
                            <li className="sidebar-label pt20">Menu</li>
                            <li className="sidebar-label">
                                <IndexLink to="/" activeClassName="active">Dashboard</IndexLink>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/fixtures" activeClassName="active">Fixtures</Link>
                            </li>
                            <li className="sidebar-label">
                                <Link to="/players" activeClassName="active">Players</Link>
                            </li>
                        </ul>

                    </div>

                </aside>
                <section id="content_wrapper">
                    <section id="content" className="table-layout animated fadeIn">
                        {this.props.children}
                    </section>
                </section>
            </div>

        )
    }
}

export default AppFrame;

我正在努力弄清楚我在這里實際上做錯了什么。 該應用程序啟動並運行，但我正在嘗試刪除所有控制台警告/錯誤。

Answer 1

您已經在搜索輸入中直接輸入了一個值，我看不出有什么好處，因為您已經有了一個占位符。 您可以從以下位置刪除該值：

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

對此：

<input type="text" className="form-control" placeholder="Search..." />

或者，如果您認為必須擁有它，請將其設置為defaultValue ：

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

文檔： https : //facebook.github.io/react/docs/uncontrolled-components.html#default-values

Answer 2

如果您不通過此輸入字段從用戶那里獲取輸入值，則需要通過設置defaultValue使此字段只讀。

如果您想設置值並涉及用戶交互。 您應該發送onChange事件來更新初始值的狀態。 這就像雙向綁定一樣有角度的支持。

state = {
   keyword: 'test' 
} 

inputChangedHandler = (event) => {
    const updatedKeyword = event.target.value;
    // May be call for search result
}

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
} 

Answer 3

出現警告是因為您在輸入上設置了 value 屬性並且沒有提供任何處理程序來更新它。 有兩種方法可以做到：

1. 您可以使用ref從 DOM 獲取表單值。

   https://reactjs.org/docs/uncontrolled-components.html

2. 設置onChange處理函數。

Answer 4

嘗試這個，

const [email, SetEmail] = useState("");

<Form.Control
    onChange={e => SetEmail(e.target.value)}
    type="email"
    name="email"
    value={email || ""}
/>

Answer 5

你不應該直接提供value相反，你可以提供defaultValue

<input type="text" className="form-control" placeholder="Search..."
                                   defaultValue="Search..."/>

Answer 6

大多數時候你必須看到提交的類型。 如果您不提供類型，您將面臨錯誤。

<form onSubmit={handleSubmit} className='grid grid-cols-1 gap-3 justify-items- 
      center mt-3'>
     <input type="text" disabled value={format(date, 'PP')} 
                     className="input input-bordered w-full max-w-xs" />
     <select name='slot' class="select select-bordered w-full max- 
     w-xs">
        {
            slots.map(slot => <option value={slot}>{slot} 
            </option>)
        }
     </select>
     <input type="text" name='name' placeholder="Your Name" 
     className="input input-bordered w-full max-w-xs" />
     <input type="email" name='email' placeholder="Email Address" 
     className="input input-bordered w-full max-w-xs" />
     <input type="text" name='phone' placeholder="Phone Number" 
     className="input input-bordered w-full max-w-xs" />
     <input type="submit" value="Submit" className="btn btn- 
     secondary text-white font-semibold w-full max-w-xs" />
</form>