试图在reactjs中创建一个子页面（频道）

Question

我正在努力让用户能够在我的网络应用中创建频道。

如果你看到下面的图片，有一个模式可以接受输入并使用

作为新创建的页面的 id。

我的路线指定为：

require('./styles/main.scss');

render(

    <Router> 
        <div>
            <Route exact path="/" component={Home}/>
            <Route exact path="/RecTest" component={RecTest}/>
            <Route exact path="/Example" component={Example}/>
            <Route path="/channels/:id" component={ (props) => (<Channel {...props}/>)} />
        </div>
    </Router>,

    // Define your router and replace <Home /> with it!
    document.getElementById('app')
);

模态代码为：

class MakeChannelModal extends Component {

    constructor(props){
        super(props);
        console.log("constructor");
        this.state={
            channelName: ''
        }

        this.clickHandler = this.clickHandler.bind(this);
        this.inputChangeHandler = this.inputChangeHandler.bind(this);
    }

    inputChangeHandler(event) {

        this.setState({
            channelName: event.target.value
        })
    }

    clickHandler() {
        <Link to={{ pathname: '/channels/' + this.state.channelName }}></Link> 
    }


    render(){
        return(

            <div className="ui active modal">
                <div className="header">Create a New Channel</div>
                <div className="loginbody">
                    <div className="fillout">
                        <div className="channelName">
                            <span>Channel Name: </span>                            
                            <Input
                                onChange = { this.inputChangeHandler }
                                placeholder="Channel Name"
                                label = "Channel Name"
                                value = { this.state.channelName } />
                        </div>
                    </div>
                    <Button onClick = { this.clickHandler }>
                        SUBMIT
                    </Button>
                </div>
            </div>
     )
    }
}

export default MakeChannelModal

我假设这是为了获取频道名称输入并将页面定向到 ID 为 df 的 Channel 组件。

我的频道组件现在只是空白。

问题是，如果我在模态中单击提交，它不会做任何事情。

甚至不显示错误。

我做错了什么？

Answer 1

clickHandler() 应该是一个改变路径名的函数，使Router 绘制另一个组件，但它尝试自己绘制 React 组件（虽然不太成功，因为这个函数实际上并没有返回任何东西）。

我认为您应该在onClick() 中使用props.history.push()，或者将<Button /> 设为<Link />。

解决方案 1：（如果您想要 <Button>，最好使用）

用这个替换你的clickHandler()：

clickHandler() {
  this.props.history.push('/channels/' + this.state.channelName);
}

解决方案 2：（仍然有效）

用这个替换你的<Button ... /> 组件：

<Link to={{ pathname: '/channels/' + this.state.channelName }}>
  SUBMIT
</Link>

所以回答history.push()：https://stackoverflow.com/a/43298961/6376451