編寫一個名爲Member
的組件,我正在做一些計算,我在this.state
之前將它存儲到其他地方,但是我遇到了一個問題,當啓動一個onChange
處理程序時,一些狀態值是undefined
,但應填寫一些值。
狀態值state onChange
元器件Member
import React from "react";
import {calcSCR, difference, multiply} from "../../utils/Calculations";
import {SCR_COEFF} from "../../constants/calc";
class Member extends React.Component {
constructor(props){
super(props);
this.state = {
id: "1",
full_name: 'Mocked member 1',
role: 'Developer',
salary: 1650,
hourly_cost: 19.6, // SCR = (gross * coeff)/100
project_data: {
project_id: '1',
hourly_rate: 40,
occupation: 50,
estimate_hours: 70,
revenue: 2800,// revenue = estimate_hours * hourly_rate
cost: 1372,// cost = estimate_hours * hourly_cost
profit: 1428// profit = revenue - cost
}
};
this.onSalaryChange = this.onSalaryChange.bind(this);
this.onHourlyCostChange = this.onHourlyCostChange.bind(this);
this.onHourlyRateChange = this.onHourlyRateChange.bind(this);
this.onEstimateHoursChange = this.onEstimateHoursChange.bind(this);
this.onRevenueChange = this.onRevenueChange.bind(this);
this.onCostChange = this.onCostChange.bind(this);
this.onNameChange = this.onNameChange.bind(this);
this.onOccupationChange = this.onOccupationChange.bind(this);
this.save = this.save.bind(this);
}
save(){
}
onNameChange(e){
this.setState({
full_name: e.target.value
})
}
onSalaryChange(e){
let salary = e.target.value;
this.setState({
salary: salary,
hourly_cost: calcSCR(salary, SCR_COEFF)
})
}
onHourlyRateChange(e){
let hourly_rate = e.target.value;
let estimate_hours = this.state.project_data.estimate_hours;
this.setState({
project_data: {
hourly_rate: hourly_rate,
revenue: multiply(estimate_hours, hourly_rate)
}
})
}
onOccupationChange(e){
this.setState({
project_data: {
occupation: e.target.value
}
})
}
onEstimateHoursChange(e){
let estimate_hours = e.target.value;
this.setState({
project_data: {
estimate_hours: estimate_hours,
revenue: multiply(estimate_hours, this.state.project_data.hourly_rate),
cost: multiply(estimate_hours,this.state.hourly_cost)
}
})
}
onHourlyCostChange(e){
let hourly_cost = e.target.value;
this.setState({
hourly_cost: hourly_cost,
project_data: {
cost: multiply(this.state.project_data.estimate_hours, hourly_cost)
}
})
}
onRevenueChange(e){
let revenue = e.target.value;
this.setState({
project_data: {
revenue: revenue,
profit: difference(revenue,this.state.project_data.cost)
}
})
}
onCostChange(e){
let cost = e.target.value;
this.setState({
project_data: {
cost: cost,
profit: difference(this.state.project_data.revenue,cost)
}
})
}
render(){
let {projectName} = this.props;
let data = this.state;
return (
<div className="member">
<a className="member__short_info" role="button" data-toggle="collapse" href={`#${data.id}`} aria-expanded="false" aria-controls={data.id}>
{data.full_name}
</a>
<div className="collapse member__member_full_info" id={data.id}>
<div className="member__full_info__row">
<div className="row">
<div className="col-sm-12 col-md-12 com-lg-12 member__full_info__header">
{projectName}
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label htmlFor="full_name" className="member__full_info__label">Member full name:</label>
<input id="full_name" type="text" name="full_name" value={data.full_name} onChange={this.onNameChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label htmlFor="salary" className="member__full_info__label">Salary:</label>
<input id="salary" type="text" name="salary" value={data.salary} onChange={this.onSalaryChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label className="member__full_info__label">Hourly cost: </label>
<input id="hourly_cost" type="text" name="hourly_cost" value={data.hourly_cost} onChange={this.onHourlyCostChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label htmlFor="hourly_rate" className="member__full_info__label">Hourly rate</label>
<input id="hourly_rate" type="text" name="hourly_rate" value={data.project_data.hourly_rate} onChange={this.onHourlyRateChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label htmlFor="occupation" className="member__full_info__label">Occupation in project (%): </label>
<input id="occupation" type="text" name="occupation" value={data.project_data.occupation} onChange={this.onOccupationChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-6 member__full_info__column">
<label htmlFor="estimate_hours" className="member__full_info__label">Estimate hours: </label>
<input id="estimate_hours" type="text" name="estimate_hours" value={data.project_data.estimate_hours} onChange={this.onEstimateHoursChange}/>
</div>
<div className="col-sm-12 col-md-12 col-lg-4 member__full_info__column">
<label className="member__full_info__label">Revenue: {data.project_data.revenue}</label>
{/*<input id="revenue" type="number" name="revenue" value={data.project_data.revenue} onChange={this.onRevenueChange}/>*/}
</div>
<div className="col-sm-12 col-md-12 col-lg-4 member__full_info__column">
<label className="member__full_info__label">Cost: {data.project_data.cost}</label>
{/*<input id="cost" type="number" name="cost" value={data.project_data.cost} onChange={this.onCostChange}/>*/}
</div>
<div className="col-sm-12 col-md-12 col-lg-4 member__full_info__column">
<label className="member__full_info__label">Profit: {data.project_data.profit}</label>
</div>
<div className="col-sm-12 member__full_info__save">
<button className="modal-component positive-btn no-margin" onClick={this.save}>Save</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Member;
例如:內部onHourlyRateChange
功能estimate_hours
變得undefined
改變之後。
裏面onEstimateHoursChange
狀態變量this.state.project_data.hourly_rate
和this.state.project_data.hourly_cost
也變成undefined
。我不知道爲什麼會發生。也許你可以給我一些建議?
如果你的'setState'需要讀取以前的狀態,你的分量經常更新,建議使用' setState(updaterFunction)'API以確保您始終獲得最新狀態。 https://facebook.github.io/react/docs/react-component.html#setstate –
在分配它之前,請確保您的事件參數不是未定義的(並且與您的應用程序的界限一致)。 – Storm