时间戳

首页 > 解决方案 > 组件正在更改受控输入。反应

javascript - 组件正在更改受控输入。反应

问题描述

我创建了一个反应组件，但遇到了一个错误。

我也在发布代码，任何帮助表示赞赏。

我正在尝试在输入框中显示此内容并从中获取输入以基于文本进行搜索......nmnmnmnmbnbnvbnvnbvnbvnbnvnbvbnvbnvbvbnvbvbnvnbvbnvbn .....

谢谢！

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './Component/Header';
import Recipe from './Component/Recipe';
import  Value from './Component/Form';
import Form from './Component/Form';




function App() {
    
    const [Search, setSearch] = React.useState("");
    
    const onInputChange = (event) => {
    
       setSearch(event.target.Value)
    }
  return (
    <div className="container">
     
        <Header Search={Search} onInputChange={onInputChange} />
       <Value />
       <Form />
      <Recipe />
      
    
    </div>

  );
}

export default App;


import React from 'react';
import { Button, input } from 'reactstrap';
import './Header.css';

const Header = props => {

    return (
        <div className= "jumbotron">
        
        <h1 className= "brand-icons"><span class="material-icons">
fastfood </span> Food Recipe </h1>
        <div>
        <input type="text"
    
        placeholder="Search Recipe"
        value={props.Search}
        onChange={props.onInputChange} />
        
        <Button className="icon">Search</Button>
        
        </div>
    
</div>
    );
}

export default Header;

标签： javascripthtmlreactjs

解决方案

setSearch(event.target.Value)应该setSearch(event.target.value)

次要：`Search` 变量应该是 camelCase

推荐阅读