1
ユーザーがリセットボタンをクリックすると、フォーム内のドロップダウンをクリアします。
しかし、プログラムで値を設定する方法を理解できません。セマンティックUI React、ドロップダウンで値をプログラムで選択するにはどうすればいいですか?
ユーザーがリセットボタンをクリックすると、フォーム内のドロップダウンをクリアします。
しかし、プログラムで値を設定する方法を理解できません。セマンティックUI React、ドロップダウンで値をプログラムで選択するにはどうすればいいですか?
'の値' を設定してみてください、あなたのコードを見ずに困難:[]
SUIRは宣言APIを使用しています。ドロップダウンの値を制御するには、HOCを使用する必要があります。
私は対処方法を示す基本的な例を作成しました。
const {
Button,
Container,
Divider,
Dropdown,
Label,
} = semanticUIReact
const options = [
{ value: 'all', text: 'All' },
{ value: 'articles', text: 'Articles' },
{ value: 'products', text: 'Products' },
]
class App extends React.Component {
constructor(props) {
\t \t super(props);
this.state = { value: 'all' }
}
reset() {
this.setState({ value: undefined })
}
setProducts() {
this.setState({ value: 'products' })
}
setValue(e, data) {
this.setState({ value: data.value })
}
render() {
const { value } = this.state
return (
<Container>
<Label content={`Current: ${value}`} />
<Divider />
<Dropdown
onChange={this.setValue.bind(this)}
options={options}
selection
value={value}
/>
<Divider />
<Button
content='Reset'
onClick={this.reset.bind(this)}
/>
<Button
content='Set products'
onClick={this.setProducts.bind(this)}
/>
</Container>
)
}
}
// ----------------------------------------
// Render to DOM
// ----------------------------------------
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
ReactDOM.render(<App />, mountNode)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://unpkg.com/semantic-ui-react/dist/umd/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">