0

我使用 JedWatsons react-select 来呈现我的选择下拉菜单。

目前我有:

父.js

import Child from './Child'

class Parent extends Component {
    constructor(props) {
        super(props);
        ...
    }

    getFoo(obj) {
        console.log(obj)
        if (obj) {
            this.setState({foo: obj.value});
        } else {
            this.setState({foo: undefined})
        }
      }

    render() {
        return <Child value={this.state.foo} onChange={this.getFoo.bind(this)} />
    }
}

Child.js 从 'react-select' 导入 {AsyncCreatable}

class Child extends Component {
    getOptions(input, callback) {
        axios({
            url, // defined globally
            headers // defined globally
        })
        .then((response) => {callback(null, options: response.data}), complete: true})})
        .catch((error) => {console.log(error, 'ups.. couldn't get options')})
    }

    createNew(obj) {
        axios({
            url,
            method: 'post',
            headers,
            data: {
                name: obj.value
            }
        }).then((response) => {this.setState({foo: response.data.id})})
            .catch((error) => {console.log(error, "Could not create company")})
    }

    render() {
        return (
            <div>
                <AsyncCreatable
                    clearable
                    placeholder="choose foo"
                    promptTextCreator={(input) => {return ("New foo: " + input)}}
                    onNewOptionClick={this.createNew.bind(this)}
                    loadOptions={this.getOptions.bind(this)}
                    name="foo-getter"
                    onChange={this.props.onChange}
                    value={this.props.value}
                />
            </div>
        )
    }
}

由于我的 Child.js 是一个无状态组件,我如何以及在哪里实现 isOptionUnique 以及如何获取新创建的值以便它显示在 Parent.js 中?

4

0 回答 0