入力フィールド値が更新されません

Question

私のフォームは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> 
); 
} 
} 

Answer 1

ここinput Sのハンドルの状態変化に非常に単純な例です。私のコメントで言及したように、defaultValueとvalueの両方の属性を使用しているので、そのエラーが発生していると思います。 Uncontrolled Componentsと詳細については、Controlled 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を試してください。私はこれが何とかあなたを助けることを願っています。