0
我的表单使用function CareerPosition(props)
填充了正确的输入字段,并填充了来自renderCareerPositions(props)
的数据。问题是我可以输入输入字段,但是输入字段的值不会更新。不知道为什么。输入字段值不更新
路径:SingleInput
const SingleInput = (props) => (
<FormGroup bsSize={props.bsSize} validationState={props.error ? 'error' : null}>
<ControlLabel>{props.title}</ControlLabel>
<FormControl
className="form-input"
name={props.name}
type={props.inputType}
value={props.content}
defaultValue={props.defaultValue}
onChange={props.controlFunc}
placeholder={props.placeholder}
/>
{props.error ? <HelpBlock>{props.error}</HelpBlock> : '' }
</FormGroup>
);
路径:Reactjs
function CareerPosition(props) {
return (
<li key={props.uniqueId}>
<SingleInput
inputType={'text'}
title={'Company name'}
name={'position.company'}
controlFunc={this.handleInputChange}
defaultValue={props.companyName}
placeholder={'Company name'}
bsSize={null}
/>
</li>
)
}
export default class CareerHistoryFormPage extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
componentWillReceiveProps(nextProps) {
const profileCandidateCollection = nextProps.profileCandidate;
const profileCandidateCollectionId = profileCandidateCollection._id;
const careerHistoryPositions = profileCandidateCollection && profileCandidateCollection.careerHistoryPositions;
console.log('componentWillReceiveProps: ', careerHistoryPositions);
if (careerHistoryPositions) {
const newData = careerHistoryPositions.map((position) =>
({
'position.uniqueId': position.uniqueId || '',
'position.company': position.company || '',
'position.title': position.title || ''
}));
this.setState({
data: newData
})
}
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
renderCareerPositions(props) {
if(0 < this.state.data.length) {
console.log(this.state.data);
const careerPositions = this.state.data.map((position) =>
<CareerPosition
key={position['position.uniqueId']}
companyName={position['position.company']}
positionTitle={position['position.positionTitle']}
uniqueId={position['position.uniqueId']}
/>
);
return (
<ul>
{careerPositions}
</ul>
)
}
}
render() {
return (
<form className='careerHistoryForm' onSubmit={this.handleFormSubmit}>
{this.renderCareerPositions()}
</form>
);
}
}
如果可能,你可以提供任何小提琴代码?或者你可以显示SingleInput类? – suyesh
我从来没有这样做过。我怎么做? – bp123
您可以使用codepen端来给出运行代码,这样可以帮助用户给出解决方案。检查以下 https://codepen.io/bradleyboy/pen/OPBpGw – suyesh