Question

我有两个单选按钮“发布和工作流程”。当我点击工作流单选按钮时，我想显示材料ui的步骤。它有效，但步骤不可点击！这是我的代码：

//function for step of material ui
     getStepContent = (stepIndex) =>{
            switch (stepIndex) {
                case 0:
                    return <TextField hintText="Rédacteur" />;
                case 1:
                    return <TextField hintText="Relecteur" />;
                case 2:
                    return <TextField hintText="Approbateur" />;
                default:
                    return '';
            }
        }
     public render() { 
 var Results = React.createClass({
        render: function () {
            return (
                <div id="results" className="search-results">
                    Some Results
                    <Stepper linear={false} activeStep={stepIndex}>
                        <Step>
                            <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 0 })}>
                                Rédaction
                                </StepButton>
                        </Step>
                        <Step>
                            <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 1 })}>
                                Relecture
                                </StepButton>

                        </Step>
                        <Step>
                            <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 2 })}>
                                Approbation
                                </StepButton>
                        </Step>
                    </Stepper>
                    {this.getStepContent(stepIndex)}
                </div>
            );
        }
    });


    //Step material ui
    const {stepIndex} = this.state;
return (
<RadioButtonGroup name="shipSpeed" defaultSelected="publish" style={{ display: 'flex' }} valueSelected={this.state.selectedValueBtnRadio} onChange={this.handleChangeBtnRadio}>                       
                        <RadioButton
                            value="publish"
                            label="Publier maintenant"   
                        />
                        <RadioButton
                            value="workflow"
                            label="Etablir un workflow"
                        />

                    </RadioButtonGroup>
                    {this.state.selectedValueBtnRadio == "workflow" ?                      
                        <Results />                        
                        : ""}   
)}

如何让步骤可点击？

感谢您的回答

Answer 1

你的结构对我来说有点奇怪...... 但是在嵌套组件时我遇到了类似的问题。尝试将所有组件分解为单独的组件，如下所示：

const StepIndex = React.createClass({
    render: function () {
        switch (this.props.stepIndex) {
            case 0:
                return <TextField hintText="Rédacteur" />;
            case 1:
                return <TextField hintText="Relecteur" />;
            case 2:
                return <TextField hintText="Approbateur" />;
            default:
                return '';
        }
    }
});

const Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
                    <Stepper linear={false} activeStep={stepIndex}>
                    <Step>
                        <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 0 })}>
                            Rédaction
                        </StepButton>
                    </Step>
                    <Step>
                        <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 1 })}>
                            Relecture
                        </StepButton>
                    </Step>
                    <Step>
                        <StepButton onClick={() => this.setState({ showReferenceIsRequired: false, stepIndex: 2 })}>
                            Approbation
                        </StepButton>
                    </Step>
                </Stepper>
                <StepIndex stepIndex={this.state.stepIndex} />
            </div>
        );
    }
});

const Radios = React.createClass({

    handleChangeBtnRadio: function() {
        // do some magic
    },

    render: function () {
        return (
            <div>
                <RadioButtonGroup name="shipSpeed" defaultSelected="publish" style={{ display: 'flex' }} valueSelected={this.state.selectedValueBtnRadio} onChange={this.handleChangeBtnRadio}>
                    <RadioButton
                        value="publish"
                        label="Publier maintenant"
                    />
                    <RadioButton
                        value="workflow"
                        label="Etablir un workflow"
                    />

                </RadioButtonGroup>
                {this.state.selectedValueBtnRadio === "workflow" ?
                    <Results />
                : ""}
            </div>
        );
    }
});

Answer 2

TLDR：this.setState更改Results组件的内部状态，它不会像您期望的那样更改父组件的状态。最简单的方法是删除不必要的组件包装器。

你在做什么很奇怪。 React.createClass应该始终位于顶层。另请注意，React.createClass现已弃用，因为作者建议使用本机ES6类（class Results extends React.Component）。

但请注意，最纯粹形式的组件只是渲染功能：

const renderResults = () => (
   <div id="results" className="search-results">
   </div>
);

然后{renderResults()}代替<Results />。

另请注意，您甚至不需要函数来返回静态值：

const results = (
   <div id="results" className="search-results">
   </div>
);

然后只是{results}。

另请注意，jsx与任何其他代码一样，您应避免代码重复。考虑：

const stepTitles = ['Rédaction', 'Relecture', 'Approbation'];

const onStepClicked = stepIndex => this.setState({ showReferenceIsRequired: false, stepIndex });
const renderStep = (stepTitle, index) => (
    <Step key={index}>
        <StepButton onClick={() => onStepClicked(index)}>
            {stepTitle}
        </StepButton>
    </Step>
);

const results = (
    <div id="results" className="search-results">
        Some Results
        <Stepper linear={false} activeStep={stepIndex}>
            {stepTitles.map(renderStep)}
        </Stepper>
        {this.getStepContent(stepIndex)}
    </div>
)

使用React.createClass调用div

2 个答案: