handleSubmit nicht auf den Wert von Eingabe zugreifen

Question

Ich erstelle eine einfache Tabelle, die bestimmte Werte berechnen wird. Ich benutze reagieren und habe zwei Eingabewerte, die in Betracht gezogen werden. Ich möchte, dass es bei submit angezeigt wird, aber wenn ich auf "submit" drücke, scheint es die Werte nicht zu erhalten und es zeigt nichts an.

export default class name extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    value: '', 
    calls: '' 
    }; 
this.handleInputChange = this.handleInputChange.bind(this); 
} 

    handleInputChange(event) { 
    const target = event.target; 
    const value = target.name; 
    const calls = target.name; 


this.setState({ 
    value: value, 
    calls: value, 
    }); 
event.preventDefault(); 
} 


handleSubmit(event) { 
    document.getElementById("subsmonth").innerHTML = this.state.value * 10; 
    document.getElementById("usecost").innerHTML = this.state.calls * 0.03; 
    document.getElementById("monthCost").innerHTML = (this.state.calls * 0.03) + (this.state.value * 10); 
    document.getElementById("yearCost").innerHTML = ((this.state.calls * 0.03) + (this.state.value * 10) * 12); 
    event.preventDefault(); 

} 

    render() { 
    return (

<div className="cl-product cl-full-width"> 
    <form onSubmit={this.handleSubmit}> 
     <label> 
      Phone users: 
      <input type="number" name="users" value={this.state.value} onChange={this.handleInputChange} /> 
     </label> 
     <label> 
      Total calls per month: 
      <input type="number" name="calls" value={this.state.calls} onChange={this.handleInputChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    <p> Subscriptions per month</p> 
    <div id="subsmonth"></div> 
    <p>Usage costs per month* - *Excluding calls to 08 numbers (at 10ppm)</p> 
    <div id="usecost"></div> 
    <p> Monthly Cost</p> 
    <div id="monthCost"></div> 
    <p>Annual Cost</p> 
    <div id="yearCost"></div> 


</div> 
    ) 
    } 
} 

Wie erkenne ich den Eingangswert und zeige ihn an?

Answer 1

Überprüfen Sie den Arbeitscode:

class App extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      value: '', 
 
      calls: '' 
 
     }; 
 
     this.handleInputChange = this.handleInputChange.bind(this); 
 
    } 
 

 
    handleInputChange(event) { 
 
     const target = event.target; 
 
     let obj = {}; 
 
     obj[target.name] = target.value; 
 

 
     this.setState(obj); 
 
     event.preventDefault(); 
 
    } 
 

 

 
    handleSubmit(event) { 
 
    \t event.preventDefault(); 
 
     \t document.getElementById("subsmonth").innerHTML = this.state.value * 10; 
 
     document.getElementById("usecost").innerHTML = this.state.calls * 0.03; 
 
     document.getElementById("monthCost").innerHTML = (this.state.calls * 0.03) + (this.state.value * 10); 
 
     document.getElementById("yearCost").innerHTML = ((this.state.calls * 0.03) + (this.state.value * 10) * 12); 
 
    } 
 

 
    render() { 
 
     return (
 
    \t  <div className="cl-product cl-full-width"> 
 
      \t <label> 
 
       \t \t Phone users: 
 
       \t \t <input type="number" name="value" value={this.state.value} onChange={this.handleInputChange} /> 
 
       \t </label> 
 
       \t <br/> 
 
       \t <label> 
 
       \t \t Total calls per month: 
 
       \t \t <input type="number" name="calls" value={this.state.calls} onChange={this.handleInputChange} /> 
 
       \t </label> 
 
       \t <input type="submit" value="Submit" onClick={this.handleSubmit.bind(this)}/> 
 
     \t \t <p> Subscriptions per month</p> 
 
     \t \t <div id="subsmonth"></div> 
 
     \t \t <p>Usage costs per month* - *Excluding calls to 08 numbers (at 10ppm)</p> 
 
     \t \t <div id="usecost"></div> 
 
     \t \t <p> Monthly Cost</p> 
 
     \t \t <div id="monthCost"></div> 
 
     \t \t <p>Annual Cost</p> 
 
     \t \t <div id="yearCost"></div> 
 
    \t  </div> 
 
     ) 
 
    } 
 
} 
 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='app'/>