Question

我正在努力为无状态功能子组件提供回调函数。我有这两个组成部分：

export const FrontDeskGUI = () => {
    const callback = (event) => console.log(event.target.value);
    return (
        <Col xs={12}>
            <Panel collapsible defaultExpanded header="Empfang">
                <ButtonGrid/>
            </Panel>
            <Panel collapsible defaultExpanded header="Verwaltung">
                <ButtonGrid/>
            </Panel>
            <CommandInput callback={callback}/>
        </Col>);
};

export const CommandInput = (callback) => {
    const style = {
        textTransform: 'uppercase'
    };
    return (
        <Col xs={12}>
            <form>
                <FormGroup
                    controlId="command">
                    <FormControl
                        type="text"
                        style={style}
                        placeholder="K&uuml;rzel eingeben"
                        onChange={callback}/>
                </FormGroup>
            </form>
        </Col>);
};

在渲染过程中，我收到以下错误：

警告：表单propType失败：提供给onChange的{{1}}类型的道具object无效，预计为input。检查function的呈现方法。

每次我在文本输入中输入内容时，都会出现以下错误：

未捕获的TypeError：inputProps.onChange.call不是函数 at Object.executeOnChange（LinkedValueUtils.js：132）

这在无状态环境中是否可行？从技术上讲，提供的回调函数是常量，因此CommandInput组件中没有固有状态。我已经看到一些答案搞乱绑定函数到正确的指针但我想尽可能避免这种情况。

Answer 1

SFC接收的单个参数是一个属性对象，其中包含JSX标记中组件上使用的每个属性的属性。

因此要么接受该属性并使用其callback属性：

export const CommandInput = (props) => {
    // ...use props.callback...
}

或使用参数解构：

export const CommandInput = ({callback}) => {
                          // ^--------^---------------- note { }
    // ... use callback...
}

目前，您尝试将道具对象本身用作onChange，这就是您收到错误的原因。

使用解构的例子：

＆＃13;

const Example = ({callback}) =>
  <div onClick={callback}>Click me</div>;

ReactDOM.render(
  <Example callback={() => console.log("Clicked")} />,
  document.getElementById("root")
);

＆＃13;

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

React：如何为无状态功能子组件提供回调箭头功能？

1 个答案: