Question

我正尝试通过 Reactjs 对表单输入，复选框，选择等执行实时计算。

可以在此小提琴

中找到要实施的一个很好的例子。

https://jsfiddle.net/flamedenise/fpovk96p/

下面的代码仅适用于表单输入实时数据输入计算。我的问题是选择和复选框分别选择或检查它们的相应值时，它不起作用。有人可以帮我解决这个问题

<!DOCTYPE html>
<html>
   <head>

   </head>
   <body>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<script src="build/jquery.min.js"></script>


<label id="rootsearch"></label>
    <script type="text/babel">

class NameForm extends React.Component {
  constructor(props) {
    super(props);
 this.state = {value: '', first: '', second: '', third: '', fourth: ''};

this.handleChange = this.handleChange.bind(this);
this.handleChange1 = this.handleChange1.bind(this);
this.onKeyPressed = this.onKeyPressed.bind(this);
  }



   handleChange1(e) {
      this.setState({ [e.target.name]: e.target.value });
   }

 handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

onKeyPressed(e) {
  console.log(e.key);
//alert('you click me');
//var first = parseFloat(this.state.first);

// convert it to a float
var first = Number(this.state.first);
var second = Number(this.state.second);
var third = Number(this.state.third);
var fourth = Number(this.state.fourth);
var total_expenses = first + second + third + fourth;

this.setState({
total_expenses_due: total_expenses,
});

}

  componentDidMount() {
  }




render() {
    return (
      <span>
        <label>
<select  onKeyUp={(e) => this.onKeyPressed(e)}  value={this.state.first}  onChange={this.handleChange1}>
            <option value="">-select-</option>
            <option value="10">10</option>
            <option value="20">20</option>

          </select><br />




<input type="checkbox" onKeyUp={(e) => this.onKeyPressed(e)}  value={this.state.second} onChange={this.handleChange1} name="second"   placeholder="Plane Ticket..." /> 20 <br />

<input  onKeyUp={(e) => this.onKeyPressed(e)} value={this.state.third} onChange={this.handleChange1} name="third" placeholder="Hotel Expenses..."  /><br />
<input  onKeyUp={(e) => this.onKeyPressed(e)} value={this.state.fourth} onChange={this.handleChange1} name="fourth" placeholder="Eating Expenses..." /><br />
<br /><br />
Total: {this.state.total_expenses_due}
<br />
Total: <input  type="text" value={this.state.total_expenses_due} onChange={this.handleChange1} placeholder="Total Expenses..."/>




                </label>

      </span>
   );    
}



}
ReactDOM.render(
  <NameForm />,
  document.getElementById('rootsearch')
);


 </script>



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


   </body>
</html>

Answer 1

嘿，我不知道这个问题很简单。感谢Ashish Sherawat。在选择器中设置name属性并在构造函数内的状态下初始化复选框值可解决此问题。感谢Ashish Sherawat

Answer 2

您只需要2种方法即可处理所有输入，一种用于总费用，另一种用于其他费用，如果不希望，也可以删除总费用更改方法。

像这样

  handleChange(e) {
    let value = e.target.value;
    if (e.target.name === 'second') {
      value = 20;
    }
    this.setState({ [e.target.name]: value }, function () {
      var first = Number(this.state.first);
      var second = Number(this.state.second);
      var third = Number(this.state.third);
      var fourth = Number(this.state.fourth);
      var total_expenses = first + second + third + fourth;
      this.setState({ total_expenses_due: total_expenses });
    });    

  }

  handleTotalexpenses(e) {
    var first = Number(this.state.first);
    var second = Number(this.state.second);
    var third = Number(this.state.third);
    var fourth = Number(this.state.fourth);
    var total_expenses = first + second + third + fourth;
    this.setState({ total_expenses_due: e.target.value });
  }

您已经处理名称时，不需要按键或其他任何操作，选择和复选框中缺少您的名字。

Demo

Reactjs表单计算数据仅适用于输入

2 个答案: