2017-06-16 80 views
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> 
); 
} 
} 
+0

如果可能,你可以提供任何小提琴代碼?或者你可以顯示SingleInput類? – suyesh

+0

我從來沒有這樣做過。我怎麼做? – bp123

+0

您可以使用codepen端來給出運行代碼,這樣可以幫助用戶給出解決方案。檢查以下 https://codepen.io/bradleyboy/pen/OPBpGw – suyesh

回答

0

下面是關於input S手狀態改變一個很簡單的例子。就像我在我的評論中提到的那樣,您正在使用defaultValuevalue屬性,我認爲這就是您遇到此錯誤的原因。如果您想深入研究,請閱讀有關Uncontrolled ComponentsControlled Components的更多信息。

class App extends React.Component { 

    constructor() { 
    super(); 
    this.state = { text: '' }; 
    this.onInputChange = this.onInputChange.bind(this); 
    } 

    onInputChange(event) { 
     const fieldName = event.target.name; 
    const fieldValue = event.target.value; 
    this.setState({ [fieldName]: fieldValue }); 
    } 

    render() { 
    return(
     <div> 
      <input type="text" name="text" value={this.state.text} onChange={this.onInputChange} placeholder="Enter something" /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(
    <App />, 
    document.getElementById('mainContainer') 
); 

嘗試一下fiddle上面的代碼。不知何故,我希望這可以幫助你。