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上句柄状态更改的一个非常简单的示例。就像我在评论中提到的那样，您使用的是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。我希望这能以某种方式帮助你。

输入字段值不会更新

1 个答案: