Question

我需要解析用户输入的文本，以便可以使用与特定单词相关的单词来构成组件。

示例：我需要*来购买狗狗*

需要在文本中找到以*结尾的单词，并将其发送到服务器以获取相关单词的响应。

所有这些过程都应通过按“Обучить”按钮开始。

我试图进行解析，但是我担心如果系统中有多个用户，它将导致不稳定。

带有文本字段和按钮的组件的代码在这里：

constructor(props){
    super(props);
    // initial state
    this.state = {
        textInput: '',
        text: ''
    }

}

clear = () => {
    // return the state to initial
    this.setState({
        textInput: ''
    })
}

write = () => {
    this.setState(
        {
            text:''
        }
    )
}

render(){
    return (
        <Paper style={{maxWidth: 936, marginLeft: '250px', overflow: 'hidden'}}>
            <AppBar position="static" color="default" elevation={0}>
                <Toolbar>
                    <Grid container spacing={16} alignItems="center">
                        <Grid item xs>
                            <TextField
                                fullWidth
                                placeholder="Введите фразу которую нужно обучить"
                                id = 'textInput'
                                InputProps={{
                                    disableUnderline: true,
                                }}
                                value={this.state.textInput}
                                onChange={(e)=>{this.setState({textInput: e.target.value})}}
                            />
                        </Grid>
                        <Grid item>
                            <Button variant="contained" color="primary" style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}>
                                Обучить
                            </Button>
                            <Tooltip title="Сбросить">
                                <IconButton>
                                    <RefreshIcon color="inherit" style={{display: 'block'}} id = 'clearButton' onClick={this.clear}/>
                                </IconButton>
                            </Tooltip>
                        </Grid>
                    </Grid>
                </Toolbar>
            </AppBar>
            <div style={{margin: '40px 16px'}}>
                <Typography color="textSecondary" align="center">
                    Пока ничего не было обучено
                </Typography>
            </div>
        </Paper>
    );
}

理想情况下，我希望能够以某种方式找到这样的单词并将其保存以在服务器上发送。

Answer 1

您需要添加一个filterArray，然后根据textInput结尾使用'*'对其进行更新，
我已经更新了此解决方案，

constructor(props){
        super(props);
        // initial state
        this.state = {
            textInput: '',
            text: '',
            filterArray: []
        }
    }

    clear = () => {
        // return the state to initial
        this.setState({
            textInput: ''
        })
    }

    write = () => {
        this.setState(
            {
                text:''
            }
        )
    }

    changeHandler = (event) => {
        let textInput = event.target.value;
        if(textInput !== ''){
            let tempArray = textInput.split(" ");// `convert string into array`
            let filterArray = tempArray.filter(word => word.endsWith('*'));
            this.setState({textInput, filterArray});    
        }
    }
    render(){
        return (
            <Paper style={{maxWidth: 936, marginLeft: '250px', overflow: 'hidden'}}>
                <AppBar position="static" color="default" elevation={0}>
                    <Toolbar>
                        <Grid container spacing={16} alignItems="center">
                            <Grid item xs>
                                <TextField
                                    fullWidth
                                    placeholder="Введите фразу которую нужно обучить"
                                    id = 'textInput'
                                    InputProps={{
                                        disableUnderline: true,
                                    }}
                                    value={this.state.textInput}
                                    onChange={(e)=>{this.changeHandler(e)}}
                                />
                            </Grid>
                            <Grid item>
                                <Button variant="contained" color="primary" style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}}>
                                    Обучить
                                </Button>
                                <Tooltip title="Сбросить">
                                    <IconButton>
                                        <RefreshIcon color="inherit" style={{display: 'block'}} id = 'clearButton' onClick={this.clear}/>
                                    </IconButton>
                                </Tooltip>
                            </Grid>
                        </Grid>
                    </Toolbar>
                </AppBar>
                <div style={{margin: '40px 16px'}}>
                    <Typography color="textSecondary" align="center">
                        Пока ничего не было обучено
                    </Typography>
                </div>
            </Paper>
        );
    }

在获取带有'*'数据的filterArray之后，使用forEach（）进行迭代，然后传递到响应API。

如何解析输入中的文本？

1 个答案: