Question

我正在创建一个可以计算某些值的简单电子表格。我正在使用react并且有两个输入值将被考虑在内。我希望它在提交时显示，但是当我按下提交时，它似乎没有得到值并且它没有显示任何内容。

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) {
    	event.preventDefault();
       	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 (
    	    <div className="cl-product cl-full-width">
            	<label>
               		Phone users:
               		<input type="number" name="value" value={this.state.value} onChange={this.handleInputChange} />
             	</label>
             	<br/>
             	<label>
               		Total calls per month:
               		<input type="number" name="calls" value={this.state.calls} onChange={this.handleInputChange} />
             	</label>
             	<input type="submit"  value="Submit" onClick={this.handleSubmit.bind(this)}/>
      		<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>
        )
    }
}
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'/>

handleSubmit不从输入中访问值

1 个答案: