未能编译。/src/app.js行30:3:未定义'onInputChange‘no-undef

Question

未能编译。/src/app.js行30:3:未定义'onInputChange‘no-undef

搜索关键字以了解有关每个错误的详细信息。此错误发生在生成期间，无法清除。

App.js的代码

import React from 'react';
import Logo from './components/Logo/Logo';
import './App.css';
import Navigation from './components/Navigation/Navigation';
import ImageLinkForm from './components/imagelink/ImageLinkForm';
import Rank from './components/Rank/rank'
import Particles from 'react-particles-js';
const particlesOptions= {
 particles: {
   number:{
     value:30,
     density:{
       enable:true,
       value_area:800
     }
   }
 }
}


function App() {
  constructor()
  {
    super();
    this.state = {
      input: '',
    }
  }
  
  onInputChange = (event) => {
    console.log(event.target.value);
  }
  
  return (
    <div className="App">
        <Particles className="particles"
                params={particlesOptions} />
        <Navigation/>
        <Logo/>
        <Rank/>
        <ImageLinkForm onInputChange={this.onInputChange}/>
      {/*<FaceRecognition/>*/}
    </div>
  );
}
export default App;

ImageLinkForm.js的代码

import React from 'react';
import './ImageLinkForm.css';
const ImageLinkForm = ({ onInputChange }) => {
    return (
        <div>
                <p className='f3'>
                  {'This Magic Brain will detect faces in your pictures'}
                </p>
                <div className='center'>
                    <div className='form center pa4 br3 shadow-5'>
                        <input className='f4 pa2 w-70 center' type='tex' onChange={onInputChange}/>
                        <button className='w-30 grow f4 link pv2 dib white bg-light-purple'>Detect</button>
                    </div>
                </div>
        </div>

    );
}
export default ImageLinkForm;

我想知道如何修复这个错误。

Answer 1

我解决了。

在上面写一个类。

App.js

import React, { Component } from 'react';
import Logo from './components/Logo/Logo';
import './App.css';
import Navigation from './components/Navigation/Navigation';
import ImageLinkForm from './components/imagelink/ImageLinkForm';
import Rank from './components/Rank/rank'
import Particles from 'react-particles-js';
const particlesOptions= {
 particles: {
   number:{
     value:30,
     density:{
       enable:true,
       value_area:800
     }
   }
 }
}

class App extends Component
{
  constructor() 
  {
    super();
    this.state = {
      input: '',
    }
  }
  
  onInputChange = (event) => {
    console.log(event.target.value);
  }
  


  
  render(){
      return (
    <div className="App">
        <Particles className="particles"
                params={particlesOptions} />
        <Navigation/>
        <Logo/>
        <Rank/>
        <ImageLinkForm onInputChange={this.onInputChange}/>
      {/*<FaceRecognition/>*/}
    </div>
  );
}
}
export default App;