React Webpack - Submit Button nicht Eingabewert auf Formular abfragen submit

Question

Ich benutze Webpack mit React und ich kann nicht für das Leben von mir verstehen, was in diesem Build vor sich geht. Das soll geschehen.

1. Die var headerInput Änderungen an den Wert wird onChange eingegeben.

2. Wenn das Formular abgeschickt wird (onsubmit) die console.log die headerInput Wert protokolliert.

Das Problem: Der Wert, der Konsole ist numerische protokolliert wird, ist es in der Regel so etwas wie: .0.0.1. Ich denke, es ist console.log das Click-Event. Warum wird der Wert nicht wie in der HandlerInput-Funktion zugewiesen?

Jede Hilfe wird sehr geschätzt. Danke, alles.

var headerInput = null; 

import React from "react"; 

export default class Navigation extends React.Component{ 
    handlerInput(e,headerInput){ 
    headerInput = e.target.value; 
    console.log(headerInput); 
    }; 
    clickSubmit(e,headerInput){ 
    e.preventDefault(); 
    console.log(headerInput); 
    }; 
    render(){ 
    return(
    <form onSubmit={this.clickSubmit.bind(this)}> 
     <input type="text" placeholder="change header" onChange={this.handlerInput.bind(this)} /> 
     <button>Change Header</button> 
    </form> 
    ); 
    } 
}; 

Answer 1

Dies ist nicht die empfohlene Methode zur Verwendung von React. Anstatt sich auf einen "global" zu verlassen, um Ihren Status zu speichern, sollten Sie die State-API verwenden, die mit Komponenten geliefert wird.

Wie so:

import React from "react"; 

export default class Navigation extends React.Component{ 
    constructor(props) { 
    super(props); 

    // Set up your default state here. 
    this.state = { }; 

    // Do early binding. 
    this.handlerInput = this.handlerInput.bind(this); 
    this.clickSubmit = this.clickSubmit.bind(this); 
    } 

    handlerInput(e){ 
    // Use setState to update the state. 
    this.setState({ 
     headerInput: e.target.value 
    } 
    }; 
    clickSubmit(e){ 
    e.preventDefault(); 

    // You read state via this.state 
    console.log(this.state.headerInput); 
    }; 
    render(){ 
    return(
    <form onSubmit={this.clickSubmit}> 
     /* Make sure you pass the current state to the input */ 
     <input 
     type="text" 
     placeholder="change header" 
     onChange={this.handlerInput} 
     value={this.state.headerInput} 
     /> 
     <button>Change Header</button> 
    </form> 
    ); 
    } 
}; 

ich auf jeden Fall empfehlen Sie die offizielle reagieren docs denken, wie die thinking in react und react forms Tutorials.

Answer 2

Wenn der Eingang streng Einweg ist (man nur von ihm zu lesen), dann Aref nur verwenden

import React from "react"; 

class Navigation extends React.Component{ 
    clickSubmit(e,headerInput){ 
    e.preventDefault(); 
    console.log(this.inputEl.value); 
    }; 
    render(){ 
    return(
     <form onSubmit={this.clickSubmit.bind(this)}> 
     <input placeholder="change header" ref={el => this.inputEl = el} /> 
     <button>Change Header</button> 
     </form> 
    ); 
    } 
}; 

Beachten Sie, dass ...

Obwohl String Refs sind veraltet nicht, sie gelten als Legacy, und werden wahrscheinlich irgendwann in der Zukunft veraltet sein. Callback refs sind bevorzugt.

https://facebook.github.io/react/docs/more-about-refs.html