Question

我正在做一个reactjs项目，但是有一个问题。我想在输入中输入文本，文本应该出现在console.log中。之间的onSubmit函数介于42到52之间。每个人都在说我需要添加一个键，但是我不知道该键在代码中的哪个位置可以获取输入框以呈现文本。您能给我的任何帮助将不胜感激。

https://github.com/lashleykeith/GoAndReactjs/tree/master/app Click here to view the image

这是代码 app.js

 let channels = [
    {name: 'Hardware Support'},
    {name: 'Software Support'}
 ];
 class Channel extends React.Component {
    onClick(){
        console.log('I was clicked', this.props.name);
    }
    render(){
        return(
            <li onClick={this.onClick.bind(this)}>{this.props.name}</li>
            )
    }
}

class ChannelList extends React.Component{
    render(){
        return(
            <ul>
                {this.props.channels.map(channel => {
                    return (
                         <Channel name={channel.name} />
                        )
                    }
                )}
            </ul>
        )
    }
}

class ChannelForm extends React.Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    onChange(e){
        this.setState({
            channelName: e.target.value
        });
        //console.log(e.target.value);
    }
    onSubmit(e){
        let {channelName} = this.state;
        console.log(channelName);
        channels.push({
            name: channelName
        });
        this.setState({
            channelName: ''
        });
        e.preventDefault();
    }
    render(){
        return(
            <form onSubmit={this.onSubmit.bind(this)}>
                <input type='text'
                    onChange={this.onChange.bind(this)}
                    value={this.state.channelName}
                />
            </form>
            )
    }
}

class ChannelSection extends React.Component{
    render(){
        return(
        <div>
            <ChannelList channels={channels}/>
            <ChannelForm />
        </div>
        )
    }
}

 ReactDOM.render(<ChannelSection />,
document.getElementById('app'));

index.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body, input {
font-size: 24px !important;
}
</style>
</head>
<body>
<div id="app" class="container-fluid">

</div>

<script type="text/babel" src="app.js"></script>
</body>
</html>

Answer 1

您应该在构造函数方法中绑定ChangingInt。

例如

this.onClick

请参见https://reactjs.org/docs/react-component.html#constructor

Answer 2

form.onSubmit以'submit'事件的形式被调用。要模拟此事件，您需要在表单中添加一个类似

的按钮

<button type="submit" value="Submit form label"/>

然后单击此按钮，您的this.onSubmit.bind(this)将被呼叫。

React官方文档中有一个示例，显示了表单用法和onSubmit事件。

https://reactjs.org/docs/forms.html#controlled-components

Answer 3

输入文本后，您必须使用键盘的Enter键，或者如果您希望用户看到某些内容，则应在表单内添加一个类型为Submit的按钮。

Answer 4

问题是未执行与此绑定。换句话说，形式的“ this”与组件的“ this”不同，因此没有输出。将此添加到您的按钮onSubmit=this.onSubmit.bind(this)中。那是很多文章来解释如何打印到控制台。

Console.log无法在Reactjs应用上运行

4 个答案: