Блог

Я пытаюсь передать функцию форматирования компоненту с дочерними элементами. Я теряюсь в том, как установить состояние.

Для начала у меня есть пара элементов в компоненте:

 const InputWithLabel = ({ labelText, value, name, onChange, }) => (
  <div>
    <label>{labelText}</label>
    <input name={name} value={value} onChange={onChange} />
  </div>
);
  

Затем у меня есть компонент, который я хотел бы использовать для их хранения, и добавить форматирование к введенным значениям во входных данных:

 class FormatInput extends Component {
constructor( props ){
    super( props );
    this.state = {};
    this.onChange = this.onChange.bind(this);
}
onChange(event) {
    const originalValue = event.target.value;
    const newValue = this.props.applyFormat(originalValue);
    this.setState({[event.target.name]: newValue});
}
render() {
    return (
        <InputWithLabel
            name="IWL"
            labelText="Input With Label"
            onChange={this.onChange}>
        </InputWithLabel>
    );
}
}
  

Я вызываю с простой домашней страницы, вот так:

 <FormatInput name="FI" applyFormat={(arg)=> arg *=2}></FormatInput>
  

Ввод значений во входные данные на домашней странице не имеет никакого эффекта (т. Е. не умножается на 2). Проходя через код, он не выдает никаких ошибок, поэтому я не уверен, где происходит сбой.

При проверке состояние FormatInput не задано, если я явно не задал его в конструкторе, даже если состояние должно содержать любое введенное значение. Но я не понимаю, как компонент FormatInput может получать это состояние, обновлять его, поэтому, я думаю, вопрос в том, как я могу обновить состояние дочернего компонента?

Возможно, вы написали свой вопрос именно так, но вам нужно установить value атрибут для <InputWithLabel> . Не уверен, какой ключ состояния ему присвоить, хотя бы потому, что вы используете event.target.name , и я не уверен, почему.

Может быть, вы могли бы сделать что-то вроде:

 this.state = {
  formattedValue: ''
}

...

this.setState({ formattedValue: newValue })

...

<InputWithLabel
  value={this.state.formattedValue}
  name="IWL"
  labelText="Input With Label"
  onChange={this.onChange}>
</InputWithLabel>
  

Также внутри вашего средства форматирования вам следует убрать знак равенства с (arg) => arg * 2 . Используя знак равенства, вы предлагаете умножить аргумент на 2 , а затем сохранить его в arg , где, поскольку вы просто хотите вернуть измененное значение.