Question

我正在学习反应。我已经创建了一个表单，并在提交后想呈现另一个（此处的信息）组件，但无法执行。这是我的代码示例。

App.js

class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}

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

handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}

render() {
return (
  <form onSubmit={this.handleSubmit}>
    <input
      type="text"
      value={this.state.username}
      onChange={this.handleChange}
    />
     <button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
  </form>
)
}
}

Info.js

class Info extends React.Component{
{more logic and code for this component}
render(){
return (<h1>Welcome To Info</h1>)
}


}
export default Info

Answer 1

function Info(props){
  return <h3>{props.username}</h3>
}
class App extends React.Component {
  constructor(props) {
  super(props)
  this.state = { username: '' }
  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange =(event)=> {
  this.setState({ username: event.target.value })
  }

  handleSubmit(event) {
  alert(this.state.username)
  event.preventDefault()
  }

  render() {
  return (
   <div> 
    <form onSubmit={this.handleSubmit}>
      <input
        type="text"
        value={this.state.username}
        onChange={this.handleChange}
      />
       <button type="button" class ="button" value="Info" 
       onClick={this.handleSubmit}>Summary</button>
    </form>
    <Info {...this.state}/>
    </div>
  )
 }
}

Answer 2

您可以这样

class App extends React.Component {
 constructor(props) {
  super(props)
  this.state = { username: '', showInfo: false }
  this.handleChange = this.handleChange.bind(this)
  this.handleSubmit = this.handleSubmit.bind(this)
}

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

handleSubmit(event) {
 alert(this.state.username)
 event.preventDefault()
 this.setState({showInfo: true});
}

render() {
  return (
    <div>
     <form onSubmit={this.handleSubmit}>
       <input
         type="text"
         value={this.state.username}
         onChange={this.handleChange}
       />
       <button type="button" class ="button" value="Info" onClick={this.handleSubmit} component = {Summary}>Summary</button>
     </form>
     {this.state.showInfo ? <Info /> : null}
   </div>
  )
 }
}

Answer 3

渲染另一个组件到底是什么意思？

如果要在App.js中呈现它，则应将其导入，并在提交更改为true时将其保留为false的const以及记录Info的条件。看起来像-


List<Dictionary<string, object>> bookmarks = new List<Dictionary<string, object>>();

foreach (var barcode in barcodes)
{
Dictionary<string, object> bm = new Dictionary<string, object>();
string title = barcode.Text.Substring(11, barcode.Text.Length - 11);
bm.Add("Title", title);
bm.Add("Action", "GoTo");
bm.Add("Page", barcode.Page.ToString() + " XYZ 0 0 0");
bookmarks.Add(bm);
}

PdfStamper stamp = new PdfStamper(source, output);

stamp.Outlines = bookmarks;

stamp.Close();

） }

如果您要切换到另一条将信息作为默认组件存在的路由，则可以使用 React Router库https://reacttraining.com/react-router/web/，这样就可以声明路由器和简单的方法来更改UI路由

如何在react中调用handleSubmit上的组件

3 个答案: