4

React アプリに Material-UI を使用しています。制御可能なコンポーネントを使用していTabsますTab。推奨される設定でthis.state.valueは、どのタブが開いているかを判断するために使用されます。inputタブ内のフィールド にテキストを入力するthis.state.valueと、SyntheticEvent. これは、入力ボックスが別のコンポーネントにある場合でも発生します。その結果、現在のタブが閉じられます。入力テキストが現在のタブを閉じないようにしたいと思います。提案してください?

var React = require('react');
var Tabs = require('material-ui/lib/tabs/tabs');
var Tab = require('material-ui/lib/tabs/tab');

module.exports = React.createClass({
    getInitialState() {
        return {
            value: 'newGoal'
        };
    },
    handleChange(value) {
        this.setState({
            value: value
        });
    },
    render() {
        console.log("this.state.value at TABS:", this.state.value);
        return (
            <Tabs
                value={this.state.value}
                onChange={this.handleChange}
            >
                <Tab label="New Goal" value="newGoal" >
                    <input></input>
                </Tab>
                <Tab label="Existing Goal" value="existingGoal">
                </Tab>
            </Tabs>
        )
    }
});
4

1 に答える 1