我使用 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 中?