handle入力から値にアクセスしないでください。

Question

私はある値を計算する簡単なスプレッドシートを作成しています。私は反応を使用しており、考慮する2つの入力値を持っています。私はそれを提出時に表示したいが、私が提出を押すと、値を得るようには見えず、何も表示されない。

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> 
    ) 
    } 
} 

入力値を認識して表示するにはどうすればよいですか？

Answer 1

チェック作業コード：

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'/>