动态表单字段以React中的先前值呈现

Question

我正在尝试使用redux-form创建动态选项， 到目前为止，我所做的是，我已经创建了一个对象，状态为对象的数组，称为选项，现在我可以创建和删除选项，每次单击添加选项按钮时，我都会按下一个空的选项对象在选项对象的状态内，单击Delete即可执行删除操作，从状态选项中删除/删除该特定索引选项对象。

现在，当我删除选项时，问题部分就解决了。但是，如果我的已删除选项字段具有一些值，那么当我单击添加按钮时，出现的新选项已经具有一个值（也已从状态中删除），我想要从新选项中删除该值。

我也尝试了onFocus移除值，但是我的问题没有解决，我正在为UI使用material-ui库。

class AddQuestion extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            isMultiChoice : false,
            options : [
                {
                    option : 'Option 1',
                    correct : false,
                    actors : []
                }
            ],
            actors : [],
            lengthErr : '',
        }

        this.handleChoiceChange = this.handleChoiceChange.bind(this);
        this.addQuestion = this.addQuestion.bind(this);
        this.handleInitialize = this.handleInitialize.bind(this); 

        this.addOption      = this.addOption.bind(this);
        this.removeOption = this.removeOption.bind(this);  
        this.handleActorOptionChange = this.handleActorOptionChange.bind(this); 
        this.handleOptionTextChange = this.handleOptionTextChange.bind(this);  
    }


    async removeOption(optionIndex) {
        await this.setState((prevState) => {
            let options = prevState.options;  
            options.splice(optionIndex, 1);

            return {
                options : options
            }
        }); 
    }

    async addOption() {
        await this.setState((prevState) => { 
            return {
                options : [
                    ...prevState.options,
                        {
                        option : 'Option new ',
                        correct : false,
                        actors : []
                    }
                ]
            }   
        });
    }

    handleOptionTextChange(event, optionIndex) { 

        let optionText = event.target.value;
        let options = this.state.options
        options[optionIndex].option = optionText;
        this.setState({options : options});
    }


    render() {  
        const  { classes, handleSubmit, errorMessage, isLoading} = this.props; 

        return ( 
            <Grid container style={{ 'margin' : '20px','width':'auto'}}>
                <form onSubmit={handleSubmit(this.addQuestion)} style={{'width':'100%'}} > 
                    <FormControl margin="normal" required fullWidth> 
                        <Field
                            name="video"
                            disabled
                            label={this.props.videoRow.title}
                            style={Style.widthAuto}
                            component={RenderTextField}
                        /> 
                    </FormControl>


                    <RenderOptions 
                        addOption={this.addOption}
                        removeOption={this.removeOption}
                        options={this.state.options}
                        handleOptionTextChange={this.handleOptionTextChange}
                    /> 



                    <FormControl margin="normal" required> 
                        <Button
                          type="submit" 
                          variant="contained"
                          color="primary" 
                          disabled={isLoading}
                          size="large"
                        >
                            {isLoading === true ? <Loader/> : ''} 
                            <SaveIcon /> Save
                        </Button>
                    </FormControl>
                </form>
            </Grid> 
        )       
    }
}

export default reduxForm({
    form : 'addQuestionForm',
    validate 
})(AddQuestion);

export const RenderOptions = (props) => { 
  return (
        props.options.map((option, index) => { 
            let optionText = 'options[' + index + ']';
            let optionCorrect = 'options[' + index + '].correct';
            let label = 'Option ' + (index + 1);
            return (
            <Grid key={index} container item> 
                <Field
                    name={optionText}
                    value={optionText}
                    label={label}
                    onChange={(e) => props.handleOptionTextChange(e, index)} 
                    style={Style.width40}
                    component={RenderTextField}
                    required    
                />

                <Field
                    name={optionCorrect} 
                    style={Style.timeInput}
                    component={RenderCheckboxField} 
                />

                {(props.options.length !== 1) ? 
                    <Button
                        size="small"  
                        style={Style.widthAuto} 
                        onClick={() => props.removeOption(index)} 
                    >
                        <RemoveCircleIcon/>
                    </Button> 
                    : ''
                }
                {(props.options.length === (index + 1) && props.options.length < 4) ?
                    <Button
                        size="small" 
                        style={Style.widthAuto} 
                        onClick={() => props.addOption()} 
                    >
                        <AddCircleIcon/>
                    </Button>
                    : ''
                }  
            </Grid>
            )  
        })
    )
}

export const RenderTextField = (props) => {
    const { input, label ,meta : {touched, invalid, error }, ...custom} = props;
    // console.log('Getting ', input);
    return (
        <TextField
            {...custom}
            {...input}
            label={label}
            placeholder={label}
            error={touched && invalid}
            helperText={touched && error} 
        />
    )
}