Question

我当前设置了一个输入字段，因此当按下按钮时，输入值将被控制台记录，我试图呈现一个组件而不是此console.log。

我可以使它正常工作，但是每次我键入一个字符时它都会重新呈现，因为我不确定如何检查render方法中的单击，我通读了一些文档，但无法弄清楚该怎么做。我该如何实现这一目标？

这是代码

class Form extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        input: ''
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(e) {
         this.setState({input: e.target.value});
   }

   handleSubmit(e) {
        e.preventDefault();
        console.log(this.state.input)
   }

   render() {
     //Not sure how to check for this
    if (this.state.input) {
        return <Fetch username={this.state.input} />
    }

    return(
        <form>
            <label>
                Name:
                <input type="text" value={this.state.input} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>          
    );
  }
 }

让我知道是否需要更多信息。谢谢！

编辑：顺便说一句，我希望能够多次提交该表单，对不起，我应该对我的问题进行更多描述。我希望Form组件保持渲染状态，并且希望Fetch组件在单击时得到渲染

Answer 1

解决方案取决于您的需求，其中可能有很多。最简单的方法就是演示：

class Form extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        input: '',
        submitted: false,  // adding the flag
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(e) {
         this.setState({input: e.target.value});
   }

   handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });  // set the flag on submit
        console.log(this.state.input)
   }

   render() {
     //Not sure how to check for this
    if (this.state.submitted) {  // show the component by the flag
        return <Fetch username={this.state.input} />
    }

    return(
        <form>
            <label>
                Name:
                <input type="text" value={this.state.input} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>          
    );
  }
}

显然，在实际应用中，这太简单了。您必须首先定义您要达到的目标。

更新：

如果要同时保留输入字段和组件，可以这样：

class Form extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        input: '',
        submitted: false,  // adding the flag
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(e) {
         this.setState({input: e.target.value});
   }

   handleSubmit(e) {
        e.preventDefault();
        this.setState({ submitted: true });  // set the flag on submit
        console.log(this.state.input)
   }

   render() {
    return(
        <form>
            <label>
                Name:
                <input type="text" value={this.state.input} onChange={this.handleChange} />
            </label>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />

            {this.state.submitted && (
              <Fetch username={this.state.input} />
            )}
        </form>          
    );
  }
}

Answer 2

实际上，您要做的是每次用户键入一个字符时，都在显示Fetch组件，并在prop中传递输入的值。

通过此方法和handleChange方法

if (this.state.input) {
        return <Fetch username={this.state.input} />
    }

如果输入与“”不同，则此条件返回true。因此，键入一个字符后，它将变为true并显示它。

在您的情况下，您要做的是单击“提交”按钮时显示“提取”组件。您可以做的就是创建一个状态来对其进行管理。

例如，您可以将其设置为您的状态：

this.state = {
        input: '',
        fetchIsVisibile: false,
    };

然后在您的句柄中提交即可：

handleSubmit(e) {
        this.setState({ fetchIsVisible: true }),;
        e.preventDefault();
   }

显示获取组件的条件是使用此新状态，而不是输入状态

if (this.state.fetchIsVisible) {
        return <Fetch username={this.state.input} />
    }

Answer 3

您可以添加状态是否以该状态提交表单，并在呈现组件时进行检查

如果要检查是否已提交表单并且输入的内容不为空，则可以改用(this.state.submitted && this.state.input)

class Form extends React.Component {
   constructor(props) {
    super(props)

    this.state = {
        input: '',
        submitted: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
   }

   handleChange(e) {
         this.setState({input: e.target.value});
   }

   handleSubmit(e) {
        this.setState({
          submitted: true
        });
   }

   render() {
     //Not sure how to check for this
    if (this.state.submitted) {
        return <div>
          <div>FETCH COMPONENT</div>
          <div>input: {this.state.input}</div>
        </div>
    }

    return(
        <form>
            <label>
                Name:
                <input type="text" value={this.state.input} onChange={this.handleChange} />
            </label>
            <div>input: {this.state.input}</div>
            <input type="submit" value="Submit" onClick={this.handleSubmit} />
        </form>          
    );
  }
 }
 
 ReactDOM.render(<Form />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app"></div>

React：基于点击渲染组件

3 个答案: