Question

我正在尝试将格式化功能传递给带有子元素的组件。我迷失了如何设置状态。

首先，我在组件中有几个元素：

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组件如何获取该状态，并对其进行更新，所以我想问题是，如何更新子组件的状态？

Answer 1

这可能是您编写问题的方式，但是您需要为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 中，因为您只想返回修改后的值。

更改子组件的状态

1 个答案: