Kann Eigenschaft 'Länge' von undefined [reactjs] nicht lesen

Question

Ich versuche, das verbleibende Zeichen mit reactjs zu zählen. Ich habe die Funktion definiert, die mit dem Status kommuniziert und an die untergeordnete Komponente übergeben wird. In der Kindkomponente erhalte ich einen Fehler von Uncaught TypeError: Kann die Eigenschaft 'length' von undefined nicht lesen.

app.js

export default class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {max_char:32}; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(charLength){ 
     console.log('charLength'); 
     this.setState({ 
     max_char:32 - charLength.length 
     }); 
     console.log(this.state.max_char); 
    } 

    render() { 
    return (
     <div> 
      <Layout fixedHeader> 
      <Content> 
       <div className="page-content"> 
       <DeviceEventList /> 
       <DeviceDialog onChange={this.handleChange} /> 
       </div> 
       <div className="empty-space"> 
       </div> 
      </Content> 
      </Layout> 
     </div> 
    ); 
    } 
} 

geräte dialog.js

class DeviceDialog extends Component { 
    constructor(props) { 
    super(props); 
    console.log('this.props',this.props.onChange); 
    } 

    handleInputChange(event){ 
    console.log(event.target.value); 
    let name = event.target.value; 
    this.props.onChange(name); 
    } 

    renderOwnADevice(){ 
    console.log('open',this.props.active_device_event.open); 
    return(
     <div className="device-action"> 
     <Dialog open={this.props.active_device_event.open} onCancel={this.props.CancelDeviceEvent}> 
      <DialogContent> 
       <Textfield 
        onChange={()=> {this.handleInputChange(event)}} 
        pattern="-?[0-9]*(\.[0-9]+)?" 
        error="Input is not a number!" 
        label="Device Serial Number" 
        floatingLabel 
       /> 
       <span style={{ float:'right'}}>character</span> 
      </DialogContent> 
     </Dialog> 
     </div> 
    ) 
    } 


    render() { 
    if (!this.props.active_device_event){ 
     return <h5 style={{ textAlign:'center' }}>Click icon based on your work</h5>; 
    } 
    let icon_name = this.props.active_device_event.icon_name; 
    if(icon_name == 'devices_other'){ 
     return (<div>Device Other</div>); 
    } 
    if(icon_name == 'add_circle_outline'){ 
     return (this.renderOwnADevice()); 
    } 
    } 
    } 

Answer 1

Ich würde onChange={()=> {this.handleInputChange(event)}} erraten onChange={(event) => {this.handleInputChange(event)}} sein sollte. Jetzt übergeben Sie eine Ereignisvariable, die nicht definiert ist.

Als eine Neben: wahrscheinlich auch besser, den Handler im Konstruktor zu binden, wie Sie in app.js anstatt eine anonyme Funktion Wrapper in Ihrem Render.

Answer 2

event ist niemals in dieser Zeile definiert: onChange={()=> {this.handleInputChange(event)}}. Daher empfängt Ihre handleChange Funktion einen undefined Wert, keine Zeichenfolge.

<Textfield 
    onChange={this.handleInputChange} 
    pattern="-?[0-9]*(\.[0-9]+)?" 
    error="Input is not a number!" 
    label="Device Serial Number" 
    floatingLabel 
/> 

Ihre this.handleInputChange wird nun wie das Ereignis Argument übergeben werden.